在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题。
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);
一般来说,我们只需要把处理拖拽文件的业务逻辑写到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不阻止默认行为也不会触发浏览器打开文件,为了防止某些浏览器可能有的兼容性问题,把拖拽周期中的所有的事件都阻止默认行为并且阻止了事件冒泡。
我们会在drop这个事件的回调中的事件对象能够得到文件对象。
在事件对象中,一个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);
上面代码创建了一个FileReader实例,通过这个实例对文件进行读取,我测试读取一个1G多的文件要3S多,时间有点长,就用slice截取了前3个字符,为什么是前3个不是前2个或者前4个呢,因为代码是我写的,我开心这么写呗~
如果load事件触发了,就说明拖拽过来的东西是文件,如果error事件触发了,就说明是文件夹,为了防止其他可能的潜在错误,用try包起来这段代码。
三方应用的一点点小hack
经过测试发现通过Mac的Finder拖拽文件没有问题,但是有时候文件并不一定在Finder中,也可能在某些应用中,有一个应用叫做圈点,这个应用的用户反馈文件拖拽失效,去看了其他开源文件上传的源码,发现了这样一行代码:
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拖拽功能的实现?相关面试题,主要包含被问及js拖拽功能的实现?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 首先是三个事件,分别是mousedown,mousemove,mouseup 当鼠标点击按下的时候,需要一个tag标识此时已经按下,可以执行mousemove里面的具体方法。 clientX,clientY标识的是鼠标的坐标,分别标识横坐标和纵坐标,并且我
本文向大家介绍BootStrap modal实现拖拽功能,包括了BootStrap modal实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下 在使用modal时首选需要引用js 编辑Html代码 要完成拖拽功能需要修改一下javascript 推荐 有关bootstrap modal插件使用详细
本文向大家介绍js实现拖拽上传图片功能,包括了js实现拖拽上传图片功能的使用技巧和注意事项,需要的朋友参考一下 直接把本地图片拉到你设定的图片上传成功后的位置,就ok了,具体代码如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Vue组件Draggable实现拖拽功能,包括了Vue组件Draggable实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。 具体说明,请参考:学习链接 npm官方演示: vuedraggable特性: 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和
在GUI里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了QLineEd