💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
      现代浏览器支持拖放本地文件到浏览器上,应用可以进行文件的编辑、上传等操作,但是之前并不支持文件夹拖放。但是从最新的Chrome 21开发版开始,这个功能已经得到了支持。 ![](https://box.kancloud.cn/2016-08-09_57a9a2e98a674.jpg)       **文件拖放**       之前文件拖放的代码如下: ~~~ <div id=”dropzone”></div> var dropzone = document.getElementById('dropzone'); dropzone.ondrop = function(e) { var length =e.dataTransfer.files.length; for (var i = 0; i < length;i++) { var file =e.dataTransfer.files[i]; ... // do whatever you want } }; ~~~       通过这段代码,我们可以从本地拖放一个或者多个文件到浏览器里。但是当我们拖拽的是文件夹时,操作会被拒绝或者被当成文件处理而导致失败。 **文件夹拖放**       Chrome21允许我们从文件系统拖放一个或者多个文件夹到浏览器窗口上,你只需要对处理放置对象的方式进行一些调整。 ~~~ <div id=”dropzone”></div> var dropzone = document.getElementById('dropzone'); dropzone.ondrop = function(e) { var length = e.dataTransfer.items.length; for (var i = 0; i < length; i++) { var entry = e.dataTransfer.items[i].webkitGetAsEntry(); if (entry.isFile) { ... // do whatever you want } else if (entry.isDirectory) { ... // do whatever you want } } }; ~~~       请注意这里有一个最大的不同是我们可以把放置的对象用新的Javascript API - getAsEntry来处理,最后得到一个Entry对象(FileEntry或者DirectoryEntry)。       拿到Entry对象的访问权限后,你可以通过[FileSystem API规范](http://www.w3.org/TR/file-system-api/)里标准的文件处理方法进行处理(例如.isFile或者.isDirectory属性)。       如果要了解FileSystemAPI的更多信息, HTML5rocks上有一篇《[FileSystem API历险](#)》。至于拖放特性,可以看看[这篇文章](http://wiki.whatwg.org/wiki/DragAndDropEntries)。