js拖拽文本文档并读取内容到textarea

最新推荐文章于 2024-07-10 14:36:18 发布

西风XF

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量4.1k

点赞数

分类专栏： js 文章标签： js drag

本文链接：https://blog.csdn.net/qq_36242361/article/details/77161462

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

实现效果：拖拽本地文本文档（.txt类型）文件到浏览器

需要有一个容器：textarea或者div或者其他标签

容器需要有一个父元素：监听拖拽事件

<!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>