拖拽事件
PC端的拖拽事件：
1.拖拽
ondragenter 进去
ondragleave 出来
ondragover 悬停——一直发生
ondrop 松手
2.
let oFile=ev.dataTransfer.files[0];
let reader=new FileReader();
reader.onload=function (){};
reader.onerror=function (){};
reader.readAsText/DataURL/ArrayBuffer/BinaryString()
reader.readAsText(oFile) 文本 文本文件
reader.readAsDataURL(oFile) base64 图片
reader.readAsArrayBuffer(oFile) 原始二进制数据 编辑 不实用
reader.readAsBinaryString(oFile) 二进制的文本形式数据 上传
JS——高级语言，不擅长处理二进制数据
1.reader.readAsDataURL(oFile);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;} </style> <script> window.onload=function (){ let oDiv=document.getElementById('div1'); let oImg=document.getElementById('img1'); oDiv.addEventListener('dragenter', function (){ oDiv.innerHTML='请松手'; }, false); oDiv.addEventListener('dragleave', function (){ oDiv.innerHTML='拖到这里上传'; }, false); oDiv.addEventListener('dragover', function (ev){ ev.preventDefault(); }, false); oDiv.addEventListener('drop', function (ev){ ev.preventDefault(); // let oFile=ev.dataTransfer.files[0]; //读取 let reader=new FileReader(); reader.onload=function (){ //alert('成功'); oImg.src=this.result; }; reader.onerror=function (){ alert('读取失败了'); }; reader.readAsDataURL(oFile); console.log(reader); }, false); } </script> </head> <body> <div id="div1">拖到这里上传</div> <img src="" id="img1"> </body> </html>
2.reader.readAsArrayBuffer(oFile);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;} </style> <script> window.onload=function (){ let oDiv=document.getElementById('div1'); oDiv.addEventListener('dragenter', function (){ oDiv.innerHTML='请松手'; }, false); oDiv.addEventListener('dragleave', function (){ oDiv.innerHTML='拖到这里上传'; }, false); oDiv.addEventListener('dragover', function (ev){ ev.preventDefault(); }, false); oDiv.addEventListener('drop', function (ev){ ev.preventDefault(); // let oFile=ev.dataTransfer.files[0]; //读取 let reader=new FileReader(); reader.onload=function (){ //alert('成功'); console.log(this.result); alert(this.result[0]); }; reader.onerror=function (){ alert('读取失败了'); }; reader.readAsArrayBuffer(oFile); }, false); } </script> </head> <body> <div id="div1">拖到这里上传</div> </body> </html>
3.reader.readAsBinaryString(oFile);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;} </style> <script> window.onload=function (){ let oDiv=document.getElementById('div1'); oDiv.addEventListener('dragenter', function (){ oDiv.innerHTML='请松手'; }, false); oDiv.addEventListener('dragleave', function (){ oDiv.innerHTML='拖到这里上传'; }, false); oDiv.addEventListener('dragover', function (ev){ ev.preventDefault(); }, false); oDiv.addEventListener('drop', function (ev){ ev.preventDefault(); // let oFile=ev.dataTransfer.files[0]; //读取 let reader=new FileReader(); reader.onload=function (){ //alert('成功'); console.log(this.result); alert(this.result[0]); }; reader.onerror=function (){ alert('读取失败了'); }; reader.readAsBinaryString(oFile); }, false); } </script> </head> <body> <div id="div1">拖到这里上传</div> </body> </html>
4 . reader.readAsText(oFile);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;} </style> <script> window.onload=function (){ let oDiv=document.getElementById('div1'); oDiv.addEventListener('dragenter', function (){ oDiv.innerHTML='请松手'; }, false); oDiv.addEventListener('dragleave', function (){ oDiv.innerHTML='拖到这里上传'; }, false); oDiv.addEventListener('dragover', function (ev){ ev.preventDefault(); }, false); oDiv.addEventListener('drop', function (ev){ ev.preventDefault(); // let oFile=ev.dataTransfer.files[0]; //读取 let reader=new FileReader(); reader.onload=function (){ console.log(this.result); }; reader.onerror=function (){ alert('读取失败了'); }; reader.readAsText(oFile); }, false); } </script> </head> <body> <div id="div1">拖到这里上传</div> </body> </html>
