在使用者拖曳文件到瀏覽器的某個元素上時,js可以監聽到與拖曳相關的事件,並對拖曳結果進行處理,本文討論下和拖曳文件相關的一些問題,不過沒有處理太多關於相容性的問題。
<span style="font-size: 14px;">js</span>
能夠監聽到拖曳的事件有<span style="font-size: 14px;">drag</span>
、<span style="font-size: 14px;">dragend</span>
、<span style="font-size: 14px;">dragenter</span>
、<span style="font-size: 14px;">dragexit(沒有瀏覽器實作)</span>
#、<span style="font-size: 14px;">dragleave</span>
、<span style="font-size: 14px;">dragover</span>
、<span style="font-size: 14px;">#dragstart</span>
##、 drop<span style="font-size: 14px;"></span>
,詳細的內容可以看MDN。
其中,與拖曳檔案相關的事件有dragenter(檔案拖曳進)<span style="font-size: 14px;"></span>
、dragover(檔案拖曳在懸浮)<span style="font-size: 14px;"></span>
、#dragleave(檔案拖曳離開)<span style="font-size: 14px;"></span>
、drop(檔案拖曳放下)<span style="font-size: 14px;"></span>
。 拖曳事件可以綁定到指定的DOM元素上,可以綁定到整個頁面中。
<span style="font-size: 14px;">var dropEle = document.querySelector('#dropZone');<br>dropEle.addEventListener('drop', function (e) {<br> // <br>}, false);<br><br>document.addEventListener('drop', function (e) {<br> // <br>}, false);<br></span>
一般來說,我們只需要把處理拖曳檔案的業務邏輯寫到 #drop<span style="font-size: 14px;"></span>
事件中就可以了,為什麼還要綁定#dragenter<span style="font-size: 14px;"></span>##、
dragover<span style="font-size: 14px;"></span>、
dragleave<span style="font-size: 14px;"></span>這三個事件呢?
如果瀏覽器打開了拖曳的文件,頁面就跳走了,我們希望得到拖曳的文件,而不是讓頁面跳走。上面說到瀏覽器會開啟拖曳的檔案是瀏覽器的預設行為,我們需要阻止這個預設行為,就需要再上述的事件中進行阻止。
<span style="font-size: 14px;">dropZone.addEventListener("dragenter", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("dragover", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("dragleave", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("drop", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br> // 处理拖拽文件的逻辑<br>}<br></span>
dragenter<span style="font-size: 14px;"></span>不阻止預設行為也不會觸發瀏覽器開啟文件,為了防止某些瀏覽器可能有的相容性問題,把拖曳週期中的所有的事件都阻止預設行為並且阻止了事件冒泡。
drop<span style="font-size: 14px;"></span> #這個事件的回呼中的事件物件能夠得到檔案物件。
e.dataTransfer 在 这里只测试了Safari,其他浏览器并没有测试,不过看完本文一定也有思路处理其他浏览器的兼容情况。 由于 浏览器获取到的每个file对象有四个属性: 那么还有什么方法可以判断呢,思路大概是这样子的,用户拖拽的文件和文件夹应该是不一样的东西,用 上面代码创建了一个 如果 经过测试发现通过 需要把 由于用了 另外,我在最后调试异步处理的时候,用的断点调试,发现断点调试在 相关推荐:<span style="font-size: 14px;"></span>這樣的屬性,它是一個
DataTransfer<span style="font-size: 14px;"></span>類型的數據,有如下的屬性
#
####Array############拖曳的資料型別該屬性在Safari下比較混亂################
屬性
類型
說明
#dropEffect
#String
用來hack某些相容性問題
effectAllowed
#String
暫時不用
暫時不用
files
FileList
拖曳的檔案清單
items
DataTransferItemList
拖曳的資料(有可能是字串)
types <span style="font-size: 14px;">Chrome</span>
中我们用<span style="font-size: 14px;">items</span>
对象获得文件,其他浏览器用<span style="font-size: 14px;">files</span>
获得文件,主要是为了处理拖拽文件夹的问题,最好不允许用户拖拽文件夹,因为文件夹内可能还有文件夹,递归上传文件会很久,如果不递归查找,只上传目录第一层级的文件,用户可能以为上传功能了,但是没有上传子目录文件,所以还是禁止上传文件夹比较好,后面我会说要怎么处理。Chrome获取文件
<span style="font-size: 14px;">dropZone.addEventListener("drop", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br> <br> var df = e.dataTransfer;<br> var dropFiles = []; // 存放拖拽的文件对象<br> <br> if(df.items !== undefined) {<br> // Chrome有items属性,对Chrome的单独处理<br> for(var i = 0; i < df.items.length; i++) {<br> var item = df.items[i];<br> // 用webkitGetAsEntry禁止上传目录<br> if(item.kind === "file" && item.webkitGetAsEntry().isFile) {<br> var file = item.getAsFile();<br> dropFiles.push(file);<br> }<br> }<br> }<br>}<br></span>
其他浏览器获取文件
<span style="font-size: 14px;">dropZone.addEventListener("drop", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br> <br> var df = e.dataTransfer;<br> var dropFiles = []; // 存放拖拽的文件对象<br> <br> if(df.items !== undefined) {<br> // Chrome拖拽文件逻辑<br> } else {<br> for(var i = 0; i < df.files.length; i++) {<br> dropFiles.push(df.files[i]);<br> }<br> }<br>}<br></span>
<span style="font-size: 14px;">Safari</span>
没有<span style="font-size: 14px;">item</span>
,自然也没有<span style="font-size: 14px;">webkitGetAsEntry</span>
,所以在Safari无法确定拖拽的是否是文件还是文件夹。非Chrome内核浏览器判断目录的方法
<span style="font-size: 14px;">lastModified</span>
、<span style="font-size: 14px;">name</span>
、<span style="font-size: 14px;">size</span>
、<span style="font-size: 14px;">type</span>
,其中<span style="font-size: 14px;">type</span>
是文件的<span style="font-size: 14px;">MIME Type</span>
,文件夹的<span style="font-size: 14px;">type</span>
是空的,但是有些文件没有<span style="font-size: 14px;">MIME Type</span>
,如果按照<span style="font-size: 14px;">type</span>
是否为空判断是不是拖拽的文件夹的话,会误伤一部分文件,所以这个方法行。<span style="font-size: 14px;">File API</span>
操作的时候应该会有区别,比如进行某些操作的时候,文件就能够正常操作,但是文件夹就会报错,通过错误的捕获就能够判断是文件还是文件夹了,好我们根据这个思路来写一下。<span style="font-size: 14px;">dropZone.addEventListener("drop", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br><br> var df = e.dataTransfer;<br> var dropFiles = [];<br> <br> if(df.items !== undefined){<br> // Chrome拖拽文件逻辑<br> } else {<br> for(var i = 0; i < df.files.length; i++){<br> var dropFile = df.files[i];<br> if ( dropFile.type ) {<br> // 如果type不是空串,一定是文件<br> dropFiles.push(dropFile);<br> } else {<br> try {<br> var fileReader = new FileReader();<br> fileReader.readAsDataURL(dropFile.slice(0, 3));<br><br> fileReader.addEventListener('load', function (e) {<br> console.log(e, 'load');<br> dropFiles.push(dropFile);<br> }, false);<br><br> fileReader.addEventListener('error', function (e) {<br> console.log(e, 'error,不可以上传文件夹');<br> }, false);<br><br> } catch (e) {<br> console.log(e, 'catch error,不可以上传文件夹');<br> }<br> }<br> }<br> }<br>}, false);<br></span>
<span style="font-size: 14px;">FileReader</span>
实例,通过这个实例对文件进行读取,我测试读取一个1G多的文件要3S多,时间有点长,就用<span style="font-size: 14px;">slice</span>
截取了前3个字符,为什么是前3个不是前2个或者前4个呢,因为代码是我写的,我开心这么写呗~<span style="font-size: 14px;">load</span>
事件触发了,就说明拖拽过来的东西是文件,如果<span style="font-size: 14px;">error</span>
事件触发了,就说明是文件夹,为了防止其他可能的潜在错误,用<span style="font-size: 14px;">try</span>
包起来这段代码。三方应用的一点点小hack
<span style="font-size: 14px;">Mac</span>
的<span style="font-size: 14px;">Finder</span>
拖拽文件没有问题,但是有时候文件并不一定在<span style="font-size: 14px;">Finder</span>
中,也可能在某些应用中,有一个应用叫做<span style="font-size: 14px;">圈点</span>
,这个应用的用户反馈文件拖拽失效,去看了其他开源文件上传的源码,发现了这样一行代码:<span style="font-size: 14px;">dropZone.addEventListener("dragover", function (e) {<br> e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br></span>
<span style="font-size: 14px;">dropEffect</span>
置为<span style="font-size: 14px;">copy</span>
,上网搜了下这个问题,源码文档中也没有说为什么要加这个,有兴趣的同学可以找一下为什么。可以拿来就用的代码
<span style="font-size: 14px;">FileReader</span>
去读取文件,这是一个异步IO操作,为了记录当前处理了多少个文件,以及什么时候触发拖拽结束的回调,写了一个<span style="font-size: 14px;">checkDropFinish</span>
的方法一直去比较处理的文件数量和文件总数,确定所有文件处理完了后就去调用完成的回调。<span style="font-size: 14px;">Safari</span>
中会导致异步回调不触发,需要自己调试定制功能的同学注意下。<span style="font-size: 14px;">// 获得拖拽文件的回调函数<br>function getDropFileCallBack (dropFiles) {<br> console.log(dropFiles, dropFiles.length);<br>}<br><br>var dropZone = document.querySelector("#dropZone");<br>dropZone.addEventListener("dragenter", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("dragover", function (e) {<br> e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用,如圈点<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("dragleave", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br>}, false);<br><br>dropZone.addEventListener("drop", function (e) {<br> e.preventDefault();<br> e.stopPropagation();<br><br> var df = e.dataTransfer;<br> var dropFiles = []; // 拖拽的文件,会放到这里<br> var dealFileCnt = 0; // 读取文件是个异步的过程,需要记录处理了多少个文件了<br> var allFileLen = df.files.length; // 所有的文件的数量,给非Chrome浏览器使用的变量<br><br> // 检测是否已经把所有的文件都遍历过了<br> function checkDropFinish () {<br> if ( dealFileCnt === allFileLen-1 ) {<br> getDropFileCallBack(dropFiles);<br> }<br> dealFileCnt++;<br> }<br><br> if(df.items !== undefined){<br> // Chrome拖拽文件逻辑<br> for(var i = 0; i < df.items.length; i++) {<br> var item = df.items[i];<br> if(item.kind === "file" && item.webkitGetAsEntry().isFile) {<br> var file = item.getAsFile();<br> dropFiles.push(file);<br> console.log(file);<br> }<br> }<br> } else {<br> // 非Chrome拖拽文件逻辑<br> for(var i = 0; i < allFileLen; i++) {<br> var dropFile = df.files[i];<br> if ( dropFile.type ) {<br> dropFiles.push(dropFile);<br> checkDropFinish();<br> } else {<br> try {<br> var fileReader = new FileReader();<br> fileReader.readAsDataURL(dropFile.slice(0, 3));<br><br> fileReader.addEventListener('load', function (e) {<br> console.log(e, 'load');<br> dropFiles.push(dropFile);<br> checkDropFinish();<br> }, false);<br><br> fileReader.addEventListener('error', function (e) {<br> console.log(e, 'error,不可以上传文件夹');<br> checkDropFinish();<br> }, false);<br><br> } catch (e) {<br> console.log(e, 'catch error,不可以上传文件夹');<br> checkDropFinish();<br> }<br> }<br> }<br> }<br>}, false);<br></span>
以上是js控製檔拖曳及取得拖曳內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!