使用一个输入javascript处理目录/文件上传 [英] Handle directory/files upload with one input javascript
本文介绍了使用一个输入javascript处理目录/文件上传的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想允许用户拖动和上传目录和文件。
I want to allow users dragging and uploading directory and files.
我知道我可以创建
<input type="file" multiple />
<!-- for files/multiple files upload-->
和
<input type="file" directory mozDirectory webkitDirectory />
<!-- for directory uploads -->
我尝试检测用户拖动项目(如果它是目录或文件)并设置目录属性取决于在那,但事实证明,javascript不允许你检查。
i tried detecting while user is dragging the item if it is a directory or file and setting directory attribute depending on that, but turns out that javascript doesn't allow you to check that.
我也看到很多网站用户可以拖动文件和目录在一起,甚至多个目录。
also i have seen on lot of websites that users are able to drag both files and directories together and even multiple directories.
我该如何实现?
推荐答案
文件夹的拖放工作在 Chrome> = 21
这是您需要的(未尝试过) ,但它可以给你这个想法):
Here's what you need (Not tried, but it can give you the idea):
function traverseFileTree(item, path) {
path = path || "";
if (item.isFile) {
// Get file
item.file(function(file) {
console.log("File:", path + file.name);
});
} else if (item.isDirectory) {
// Get folder contents
var dirReader = item.createReader();
dirReader.readEntries(function(entries) {
for (var i=0; i<entries.length; i++) {
traverseFileTree(entries[i], path + item.name + "/");
}
});
}
}
dropArea.addEventListener("drop", function(event) {
event.preventDefault();
var items = event.dataTransfer.items;
for (var i=0; i<items.length; i++) {
// webkitGetAsEntry is where the magic happens
var item = items[i].webkitGetAsEntry();
if (item) {
traverseFileTree(item);
}
}
}, false);
可以找到更多信息这里
答案来自此处
这篇关于使用一个输入javascript处理目录/文件上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文