Html5 简单拖拽读取文件

时间 2019-11-17

标签 html5 html 简单读取文件栏目 HTML5 繁體版

原文原文链接

html5 拖拽须要监听以下事件

ondragenter 拖拽进入
ondragleave 拖拽离开
ondragover 悬停
ondrop 松手

element添加事件

oDiv.addEventListener("dragenter",function(),false);
oDiv.addEventListener("dragleave",function(),false);
oDiv.addEventListener("dragover",function(ev){ ev.preventDefault();//取消事件的默认动做，防止浏览器打开文件 },false);
oDiv.addEventListener("drop",function(){ ev.preventDefault();//取消事件的默认动做，防止浏览器打开文件 },false);

文件读取

let reader = new FileReader() ;
文件读取主要事件javascript

reader.onload = function(){}; //文件读取完调用
reader.onerror = function(){}; //文件读取失败
reader.result //文件读取到的结果

文件读取的方式css

reader.readerAsText(oFile) 读取文本
reader.readerAsDataURL(ofile) base64 --图片
reader.readerAsArrayBuffer(ofile) 包含一个 ArrayBuffer 对象以表示所读取文件的数据不实用
reader.readerAsBinaryString(ofile) 读取文件二进制的文本形式数据用于上传

代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件拖拽</title>
    <style> #div1 { width: 500px; height: 500px; background: #cccccc; border: 1px solid #000000; text-align: center; line-height: 500px; } </style>
    <script> window.onload = function () { var div1 = document.getElementById("div1"); //拖拽进入 div1.addEventListener("dragenter", function () { div1.innerHTML = "请松手" ; }, false); //拖拽离开 div1.addEventListener("dragleave", function () { div1.innerHTML = "拖到这里上传" ; }, false); //悬停 div1.addEventListener("dragover", function (ev) { ev.preventDefault();//取消事件的默认动做，防止浏览器打开文件 }, false); //松手 div1.addEventListener("drop", function (ev) { ev.preventDefault();//取消事件的默认动做。 let fileReader = new FileReader() ; let file = ev.dataTransfer.files[0] ; fileReader.onload = function(){ alert("成功"+this.result); } fileReader.onerror = function(){ alert("读取失败"); } fileReader.readAsText(file) ; }, false); } </script>
</head>

<body>
    <div id="div1">拖到这里上传</div>
</body>
</html>
复制代码