textarea 拖拽文本文件识别思路 1、需要有一个容器：textarea或者div或者其他标签 2、监听容器的拖拽事

思路

1、需要有一个容器：textarea或者div或者其他标签 2、监听容器的拖拽事件 dragenter、dragover、drop 3、获取拖拽文件数据e.dataTransfer.files 4、使用 FileReader 类解析文本文件获取文本内容 5、最终把文本内容传给容器

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="oDiv" id="oDiv">
			<textarea rows="10" cols="50" id="outTextarea" placeholder="输入或拖拽.txt文件至框内"></textarea>
		</div>
	</body>
	<script type="text/javascript">
		var oDiv = document.getElementById('oDiv');
		var outTextarea = document.getElementById('outTextarea');
		
		oDiv.addEventListener("dragenter", function(e){
			e.stopPropagation();
			e.preventDefault();
		}, false);
		
		oDiv.addEventListener("dragover", function(e){
			e.stopPropagation();
			e.preventDefault();
		}, false);
		
		oDiv.addEventListener("drop", function(e){
			e.stopPropagation();
			e.preventDefault();
			console.log(e)
			console.log(e.dataTransfer)
			
			var dt = e.dataTransfer;
			var files = dt.files;
		
			handle("filelist",files);
		}, false);
		
		function handle(type,data){
			
			// 处理结果
			var handleResult = function(file){
				var reader = new FileReader();
			    reader.onload = function(e){
			      outTextarea.innerText = e.target.result;
			    };
			    reader.readAsText(file);
			};
		};
	</script>
</html>

————————————————
版权声明：本文为CSDN博主「西风XF」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：blog.csdn.net/qq_36242361…