有两种方法实现多文件上传&文件夹文件批量上传案例: 带"directory"属性的input上传框,或者给元素加上drop事件监听。下面这两个方法就是新API的具体实现(注意:polyfill.js只在最新的chrome浏览器有效)。
<input type="file" id="fileInput" allowdirs multiple /> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(event) { document.getElementById('fileInput').addEventListener('change', function() { var uploadFile = function(file, path) { console.log(path, file); // handle file uploading }; var iterateFilesAndDirs = function(filesAndDirs, path) { for (var i = 0; i < filesAndDirs.length; i++) { if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') { var path = filesAndDirs[i].path; // this recursion enables deep traversal of directories filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs) { // iterate through files and directories in sub-directory iterateFilesAndDirs(subFilesAndDirs, path); }); } else { uploadFile(filesAndDirs[i], path); } } }; // begin by traversing the chosen files and directories if ('getFilesAndDirectories' in this) { this.getFilesAndDirectories().then(function(filesAndDirs) { iterateFilesAndDirs(filesAndDirs, '/'); }); } }); }); </script>
<div id="dropDiv">将文件或文件夹拖拽到这里!</div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(event) { document.getElementById('dropDiv').addEventListener('drop', function (e) { e.stopPropagation(); e.preventDefault(); var uploadFile = function(file, path) { console.log(path, file); // handle file uploading }; var iterateFilesAndDirs = function(filesAndDirs, path) { for (var i = 0; i < filesAndDirs.length; i++) { if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') { var path = filesAndDirs[i].path; // this recursion enables deep traversal of directories filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs) { // iterate through files and directories in sub-directory iterateFilesAndDirs(subFilesAndDirs, path); }); } else { uploadFile(filesAndDirs[i], path); } } }; // begin by traversing the chosen files and directories if ('getFilesAndDirectories' in e.dataTransfer) { e.dataTransfer.getFilesAndDirectories().then(function(filesAndDirs) { iterateFilesAndDirs(filesAndDirs, '/'); }); } }); }); </script>