www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

js完成调节文件拖拽并收获拖拽内容成效,基于

2019-05-31 03:18 来源:未知

在用户拖拽文件到浏览器的某些成分上时,js能够监听到与拖拽相关的事件,并对拖拽结果举行拍卖,本文切磋下和拖拽文件有关的局地标题,可是并未有拍卖太多关于包容性的难点。

js完毕调控文件拖拽并拿走拖拽内容功能,js拖拽

在用户拖拽文件到浏览器的有个别成分上时,js能够监听到与拖拽相关的风浪,并对拖拽结果实行拍卖,本文研讨下和拖拽文件有关的有个别主题材料,不过未有管理太多关于包容性的标题。

红霉素AIL邮箱的附属类小部件拖拽上传成效给部分用户带来及比非常的大的福利,而且部分亟待大批量上传文件的后台管理中也会感受到拖拽上传文件带来的快速。

拖拽事件

js能够监听到拖拽的风浪有drag、dragend、dragenter、dragexit(未有浏览器实现)、dragleave、dragover、dragstart、drop,详细的源委能够看MDN。

个中,与拖拽文件有关的风波有dragenter(文件拖拽进)、dragover(文件拖拽在上浮)、dragleave(文件拖拽离开)、drop(文件拖拽放下)。

拖拽事件能够绑定到钦命的DOM成分上,能够绑定到方方面面页面中。

var dropEle = document.querySelector('#dropZone');
dropEle.addEventListener('drop', function (e) {
  // 
}, false);

document.addEventListener('drop', function (e) {
  // 
}, false);

拖拽事件

js能够监听到拖拽的风浪有drag、dragend、dragenter、dragexit(未有浏览器达成)、dragleave、dragover、dragstart、drop,详细的内容能够看MDN。

内部,与拖拽文件有关的风云有dragenter(文件拖拽进)、dragover(文件拖拽在上浮)、dragleave(文件拖拽离开)、drop(文件拖拽放下)。

拖拽事件能够绑定到钦定的DOM成分上,能够绑定到全方位页面中。

var dropEle = document.querySelector('#dropZone');
dropEle.addEventListener('drop', function (e) {
  // 
}, false);

document.addEventListener('drop', function (e) {
  // 
}, false);

接下去一齐理解一下HTML五拖拽上传,基于CHROME浏览器

掣肘私下认可行为

相似的话,我们只要求把拍卖拖拽文件的工作逻辑写到drop事件中就可以了,为何还要绑定dragenter、dragover、dragleave那多个事件吧?

因为当您拖拽三个文件到未有对拖拽事件实行拍卖的浏览器中的时候,浏览器会张开这些文件,例如拖拽一张图片浏览器会展开那些图形,在未有PDF阅读器的时候也能够拖拽一个PDF到浏览器中,浏览器就能够打开这些PDF文件。

1旦浏览器张开了拖拽的文本,页面就跳走了,大家意在赢得拖拽的文件,而不是让页面跳走。上边说起浏览器会张开拖拽的文本是浏览器的暗中同意行为,大家要求阻止那些暗中认可行为,就需求再上述的轩然大波中张开阻挠。

dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  // 处理拖拽文件的逻辑
}

骨子里dragenter不阻止暗中认可行为也不会接触浏览器张开文件,为了防止万一有些浏览器大概有的包容性难点,把拖拽周期中的全数的事件都阻挡默许行为同不常间阻止了风云冒泡。

阻拦私下认可行为

诚如的话,大家只需求把拍卖拖拽文件的事情逻辑写到drop事件中就足以了,为何还要绑定dragenter、dragover、dragleave那多个事件呢?

因为当你拖拽三个文件到未有对拖拽事件张开管理的浏览器中的时候,浏览器会展开这一个文件,譬喻拖拽一张图纸浏览器会张开这一个图片,在一直不PDF阅读器的时候也能够拖拽二个PDF到浏览器中,浏览器就能张开这几个PDF文件。

假使浏览器展开了拖拽的文书,页面就跳走了,大家期望获得拖拽的文本,而不是让页面跳走。下边谈起浏览器会展开拖拽的公文是浏览器的暗中认可行为,大家必要阻止这几个暗许行为,就必要再上述的轩然大波中举行拦阻。

dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();
  // 处理拖拽文件的逻辑
}

实在dragenter不阻止默许行为也不会触发浏览器张开文件,为了幸免少数浏览器也许有个别包容性难点,把拖拽周期中的全数的轩然大波都挡住暗中同意行为同一时候阻止了轩然大波冒泡。

  1. HTML代码

    <div id="drop_area">
           Drag files to this area
    </div>
    
  2. 监听拖拽进程中的dragleave、drop、dragenter、dragover事件,首先撤除浏览器的暗中同意事件

    $(document).on({
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        }
    });
    
  3. 监听drop事件

    var box = document.getElementById("drop_area");
    box.addEventListener("drop", function(e){
        e.preventDefault(); // 取消浏览器默认的拖拽效果
    
        // 上传的文件列表
        var fileList = e.dataTransfer.files;
    
        // 上传文件的个数
        if (fileList.length == 0) {
            return false;
       }
    
    },false);
    
  4. 接下去的中坚作用,Ajax上传

    // 新建一个XHR请求
    var xhr = new XMLHttpRequest(); 
    xhr.open("post", url, true); 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    
    // 监听上传进度和完成事件
    xhr.upload.addEventListener("progress", function(e){  
        if (e.lengthComputable) {  
            var percentage = Math.round((e.loaded * 100) / e.total);  
            console.log(percentage)  
        }  
    }, false); 
    
    // 上传完成事件
    xhr.upload.addEventListener("load", function(e){  
    
    }, false);  
    
  5. 如是图片,展现拖拽上传的文件

    //拖拉图片到浏览器,可以实现预览功能 
    // 图片
    var img = window.webkitURL.createObjectURL(fileList[0]); 
    var filename = fileList[0].name; //图片名称 
    // 图片大小
    var filesize = Math.floor((fileList[0].size)/1024);  
    
  6. Web前端,模拟fromData上传

    var fd = new FormData(); 
    fd.append('file', fileList[1]); 
    xhr.send(fd);
    
  7. 整体JS代码

获得拖拽的文本

我们会在drop那么些事件的回调中的事件目标能够获得文件对象。

在事变目的中,3个e.dataTransfer那样的属性,它是叁个DataTransfer类型的多寡,有如下的品质

属性 类型 说明
dropEffect String 用来hack某些兼容性问题
effectAllowed String 暂时不用
files FileList 拖拽的文件列表
items DataTransferItemList 拖拽的数据(有可能是字符串)
types Array 拖拽的数据类型 该属性在Safari下比较混乱

在Chrome中我们用items对象获得文件,其余浏览器用files获得文件,主借使为着管理拖拽文件夹的标题,最棒不容许用户拖拽文件夹,因为文件夹内恐怕还大概有文件夹,递归上传文件会很久,如若不递归查找,只上传目录第3层级的文本,用户大概感到上传效用了,可是并未有上传子目录文件,所以照旧禁止上传文件夹比较好,前面小编会说要怎么管理。

Chrome获取文件

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件对象

  if(df.items !== undefined) {
    // Chrome有items属性,对Chrome的单独处理
    for(var i = 0; i < df.items.length; i  ) {
      var item = df.items[i];
      // 用webkitGetAsEntry禁止上传目录
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
      }
    }
  }
}

任何浏览器获取文件

此地只测试了Safari,其余浏览器并不曾测试,但是看完本文一定也许有思路管理任何浏览器的相配情状。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件对象

  if(df.items !== undefined) {
    // Chrome拖拽文件逻辑
  } else {
    for(var i = 0; i < df.files.length; i  ) {
      dropFiles.push(df.files[i]);
    }
  }
}

是因为Safari未有item,自然也尚无webkitGetAsEntry,所以在Safari不可能鲜明拖拽的是或不是是文件恐怕文件夹。

非Chrome内核浏览器剖断目录的方法

浏览器获取到的各样file对象有八性子格:lastModified、name、size、type,在这之中type是文本的MIME Type,文件夹的type是空的,可是某些公文并未有MIME Type,即便根据type是还是不是为空剖断是否拖拽的文件夹的话,会损伤一部分文本,所以那么些措实行。

这正是说还或者有何方法能够看清呢,思路大概是这样子的,用户拖拽的文书和文书夹应该是不平等的事物,用File API操作的时候应该会有分别,举个例子实行一些操作的时候,文件就可以符合规律操作,不过文件夹就能报错,通过荒谬的抓获就可见看清是文件可能文件夹了,好大家依据那么些思路来写一下。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = [];

  if(df.items !== undefined){
    // Chrome拖拽文件逻辑
  } else {
    for(var i = 0; i < df.files.length; i  ){
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        // 如果type不是空串,一定是文件
        dropFiles.push(dropFile);
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error,不可以上传文件夹');
          }, false);

        } catch (e) {
          console.log(e, 'catch error,不可以上传文件夹');
        }
      }
    }
  }
}, false);

地点代码创立了2个FileReader实例,通过这个实例对文件进行读取,小编测试读取八个一G多的公文要三S多,时间有一点点长,就用slice截取了前叁个字符,为何是前3个不是前三个只怕前多少个呢,因为代码是本身写的,作者开玩笑这么写呗~

要是load事件触发了,就印证拖拽过来的事物是文件,借使error事件触发了,就认证是文本夹,为了防范其余恐怕的绝密错误,用try包起来这段代码。

3方选择的一点点小hack

经过测试发现经过Mac的Finder拖拽文件没不寻常,可是一时文件并不一定在Finder中,也说不定在有个别应用中,有2个利用名称为圈点,那几个应用的用户反映文件拖拽失效,去看了此外开源文件上传的源码,开掘了如此1行代码:

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点
  e.preventDefault();
  e.stopPropagation();
}, false);

亟需把dropEffect置为copy,上网搜了下这几个标题,源码文档中也尚无说怎么要加那一个,有意思味的同班能够找一下为啥。

能够拿来就用的代码

由于用了FileReader去读取文件,那是二个异步IO操作,为了记录当前管理了稍稍个文件,以及如何时候触发拖拽停止的回调,写了三个checkDropFinish的章程一向去相比较管理的文件数量和文件总的数量,明确全体文件管理完了后就去调用达成的回调。

除此以外,我在最后调节和测试异步处理的时候,用的断点调节和测试,发掘断点调节和测试在Safari中会导致异步回调不接触,供给团结调治定制效用的同窗注意下。

// 获得拖拽文件的回调函数
function getDropFileCallBack (dropFiles) {
  console.log(dropFiles, dropFiles.length);
}

var dropZone = document.querySelector("#dropZone");
dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 拖拽的文件,会放到这里
  var dealFileCnt = 0; // 读取文件是个异步的过程,需要记录处理了多少个文件了
  var allFileLen = df.files.length; // 所有的文件的数量,给非Chrome浏览器使用的变量

  // 检测是否已经把所有的文件都遍历过了
  function checkDropFinish () {
    if ( dealFileCnt === allFileLen-1 ) {
      getDropFileCallBack(dropFiles);
    }
    dealFileCnt  ;
  }

  if(df.items !== undefined){
    // Chrome拖拽文件逻辑
    for(var i = 0; i < df.items.length; i  ) {
      var item = df.items[i];
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
        console.log(file);
      }
    }
  } else {
    // 非Chrome拖拽文件逻辑
    for(var i = 0; i < allFileLen; i  ) {
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        dropFiles.push(dropFile);
        checkDropFinish();
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
            checkDropFinish();
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error,不可以上传文件夹');
            checkDropFinish();
          }, false);

        } catch (e) {
          console.log(e, 'catch error,不可以上传文件夹');
          checkDropFinish();
        }
      }
    }
  }
}, false);

获得拖拽的公文

我们会在drop那一个事件的回调中的事件目的能够获得文件对象。

在事变指标中,2个e.dataTransfer那样的属性,它是一个DataTransfer类型的多少,有如下的质量

属性 类型 说明
dropEffect String 用来hack某些兼容性问题
effectAllowed String 暂时不用
files FileList 拖拽的文件列表
items DataTransferItemList 拖拽的数据(有可能是字符串)
types Array 拖拽的数据类型 该属性在Safari下比较混乱

在Chrome中大家用items对象获得文件,其余浏览器用files获得文件,首假使为了管理拖拽文件夹的难点,最佳不允许用户拖拽文件夹,因为文件夹内恐怕还恐怕有文件夹,递归上传文件会很久,如若不递归查找,只上传目录第三层级的文本,用户只怕感到上传功效了,不过并未有上传子目录文件,所以依旧禁止上传文件夹比较好,前面小编会说要怎么管理。

Chrome获取文件

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件对象

  if(df.items !== undefined) {
    // Chrome有items属性,对Chrome的单独处理
    for(var i = 0; i < df.items.length; i  ) {
      var item = df.items[i];
      // 用webkitGetAsEntry禁止上传目录
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
      }
    }
  }
}

任何浏览器获取文件

此地只测试了Safari,其余浏览器并从未测试,可是看完本文一定也会有思路管理任何浏览器的合作景况。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 存放拖拽的文件对象

  if(df.items !== undefined) {
    // Chrome拖拽文件逻辑
  } else {
    for(var i = 0; i < df.files.length; i  ) {
      dropFiles.push(df.files[i]);
    }
  }
}

是因为Safari未有item,自然也未尝webkitGetAsEntry,所以在Safari不也许明确拖拽的是或不是是文件恐怕文件夹。

非Chrome内核浏览器决断目录的点子

浏览器获取到的各样file对象有八个属性:lastModified、name、size、type,当中type是文件的MIME Type,文件夹的type是空的,可是多少公文并未有MIME Type,假若依照type是还是不是为空决断是或不是拖拽的文件夹的话,会拖延壹部分文件,所以这些法子行。

那么还会有啥艺术可以看清呢,思路差不离是那样子的,用户拖拽的文本和文件夹应该是分裂样的东西,用File API操作的时候理应会有分别,譬喻实行一些操作的时候,文件就可见健康操作,可是文件夹就能报错,通过荒谬的破获就能够判明是文件恐怕文件夹了,好大家依据这些思路来写一下。

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = [];

  if(df.items !== undefined){
    // Chrome拖拽文件逻辑
  } else {
    for(var i = 0; i < df.files.length; i  ){
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        // 如果type不是空串,一定是文件
        dropFiles.push(dropFile);
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error,不可以上传文件夹');
          }, false);

        } catch (e) {
          console.log(e, 'catch error,不可以上传文件夹');
        }
      }
    }
  }
}, false);

上边代码创设了3个FileReader实例,通过那一个实例对文本举行读取,笔者测试读取1个壹G多的文件要3S多,时间有一些长,就用slice截取了前2个字符,为啥是前三个不是前一个或然前三个吗,因为代码是本人写的,笔者称心快意这么写呗~

比方load事件触发了,就表明拖拽过来的东西是文件,借使error事件触发了,就认证是文本夹,为了防御别的恐怕的潜在错误,用try包起来这段代码。

三方采取的一丝丝小hack

由此测试开掘经过Mac的Finder拖拽文件没卓殊,不过一时文件并不一定在Finder中,也说不定在一些应用中,有三个选取名为圈点,这些应用的用户反映文件拖拽失效,去看了其余开源文件上传的源码,开采了那样1行代码:

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点
  e.preventDefault();
  e.stopPropagation();
}, false);

急需把dropEffect置为copy,上网搜了下那个标题,源码文书档案中也从不说怎么要加这么些,风乐趣的同班能够找一下为什么。

能够拿来就用的代码

出于用了FileReader去读取文件,那是一个异步IO操作,为了记录当前拍卖了稍稍个文件,以及怎么样时候触发拖拽停止的回调,写了三个checkDropFinish的法子一向去比较管理的文本数量和文书总量,明确全数文件管理完了后就去调用达成的回调。

除此以外,作者在结尾调节和测试异步管理的时候,用的断点调节和测试,开采断点调节和测试在Safari中会导致异步回调不接触,必要自个儿调治定制作用的同窗注意下。

// 获得拖拽文件的回调函数
function getDropFileCallBack (dropFiles) {
  console.log(dropFiles, dropFiles.length);
}

var dropZone = document.querySelector("#dropZone");
dropZone.addEventListener("dragenter", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
  e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
  e.preventDefault();
  e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  e.stopPropagation();

  var df = e.dataTransfer;
  var dropFiles = []; // 拖拽的文件,会放到这里
  var dealFileCnt = 0; // 读取文件是个异步的过程,需要记录处理了多少个文件了
  var allFileLen = df.files.length; // 所有的文件的数量,给非Chrome浏览器使用的变量

  // 检测是否已经把所有的文件都遍历过了
  function checkDropFinish () {
    if ( dealFileCnt === allFileLen-1 ) {
      getDropFileCallBack(dropFiles);
    }
    dealFileCnt  ;
  }

  if(df.items !== undefined){
    // Chrome拖拽文件逻辑
    for(var i = 0; i < df.items.length; i  ) {
      var item = df.items[i];
      if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
        var file = item.getAsFile();
        dropFiles.push(file);
        console.log(file);
      }
    }
  } else {
    // 非Chrome拖拽文件逻辑
    for(var i = 0; i < allFileLen; i  ) {
      var dropFile = df.files[i];
      if ( dropFile.type ) {
        dropFiles.push(dropFile);
        checkDropFinish();
      } else {
        try {
          var fileReader = new FileReader();
          fileReader.readAsDataURL(dropFile.slice(0, 3));

          fileReader.addEventListener('load', function (e) {
            console.log(e, 'load');
            dropFiles.push(dropFile);
            checkDropFinish();
          }, false);

          fileReader.addEventListener('error', function (e) {
            console.log(e, 'error,不可以上传文件夹');
            checkDropFinish();
          }, false);

        } catch (e) {
          console.log(e, 'catch error,不可以上传文件夹');
          checkDropFinish();
        }
      }
    }
  }
}, false);

在用户拖拽文件到浏览器的某部成分上时,js能够监听到与拖拽相关的轩然大波,并对拖拽结果...

您或然感兴趣的稿子:

  • JS达成基于拖拽退换物体大小的方法
  • JS完结的简约拖拽购物车功效示例【附源码下载】
  • AngularJS达成的简便拖拽功能示例
  • 使用javaScript达成鼠标拖拽事件
  • js完毕QQ面板拖拽效果(慕课网DOM事件探秘)(全)
  • js达成鼠标拖拽多选作用示例
  • js实现拖拽上传图片成效
  • 巨细无遗兑现js拖拽效果 return false用法详解
  • 简单的说完成js拖拽效果
  • 基于AngularJS的拖拽文件上传的实例代码
  • Java达成拖拽文件上传dropzone.js的简易利用示例代码
  • JS实现轻巧拖拽效果
  • JS实现简易的图片拖拽排序实例代码
(function($) {
    $(document).on({
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        }
    });
    var box = document.getElementById("drop_area");
    box.addEventListener("drop", function(e){
        e.preventDefault(); // 取消浏览器默认的拖拽效果
        var fileList = e.dataTransfer.files;

        if (fileList.length == 0) {
            return false;
        }

        // 循环文件列表,多文件上传 
        for (var i = 0; i < fileList.length; i  ) {
            var xhr = new XMLHttpRequest(); 
            // post上传 url上传的url,php处理
            xhr.open("post", url, true); 
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 

              // 监听上传完成 
            xhr.addEventListener("load", function(e){
                // 返回的结果
                var result = jQuery.parseJSON(e.target.responseText)

                // 依据处理返回的json数据处理UI效果
            }, false);

            var fd = new FormData(); 
            // PHP端$_FILES['file']接收
            fd.append('file', fileList[i]); 
            xhr.send(fd);
        }


    }, false);
})(jQuery);
  1. 技艺宗旨

    • 监听拖拽:监听页面包车型大巴拖拽时间,包罗:dragleave、drop、dragenter、dragover事件,一定要将浏览器的私下认可效果撤除
    • 赢得拖拽文件:在drop时间接触后通过e.dataTransfer.files获取拖拽的文件列表
    • 如需展现,读取文件 window.webkitU途达L.createObjectU卡宴L(fileList[0])
    • 出殡图片数据:使用FO猎豹CS六MData模拟表单的Ajax提交文件流

正文链接 www.bigcode.top

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:js完成调节文件拖拽并收获拖拽内容成效,基于