zoukankan      html  css  js  c++  java
  • 拖拽事件

    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>
  • 相关阅读:
    precmd:6: job table full or recursion limit exceeded
    Logs
    vue路由的使用(二)
    vue路由的使用(一)
    vue项目中正确引用jquery
    vue中使用Mint-UI移动端组件库
    HTML5表单、一些新增的输入类型以及为不支持新特性的浏览器提供解决方案
    CSS3过渡、变形、动画(二)
    CSS3过渡、变形、动画(一)
    CSS3之背景渐变
  • 原文地址:https://www.cnblogs.com/chaofei/p/8052735.html
Copyright © 2011-2022 走看看