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

来源：互联网发布：ubuntu双系统启动顺序编辑：程序博客网时间：2024/06/05 07:25

实现效果：拖拽本地文本文档（.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>

阅读全文

0 0