多文件上传&拖拽上传案例

有两种方法实现多文件上传&文件夹文件批量上传案例: 带"directory"属性的input上传框，或者给元素加上drop事件监听。下面这两个方法就是新API的具体实现（注意：polyfill.js只在最新的chrome浏览器有效）。

1、上传框实现

<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>

2、拖拽实现

<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>

最终输出：

我爱模板网