2016-04-24 110 views
2

发现这篇文章显示如何区分文件上传目录How to handle dropped folders但他们不解释我如何处理目录上传。难以找到任何例子。任何人都知道如何获得File目录中每个文件的实例?如何从文件夹中读取文件

从这篇文章复制:

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

回答

1

使用DirectoryReaderdirectoryEntry.createReader()readEntries()的文件夹,或者FileEntryfile()为单个或多个文件滴。

HTML

<div id="dropzone" 
    ondragenter="event.stopPropagation(); event.preventDefault();" 
    ondragover="event.stopPropagation(); event.preventDefault();" 
    ondrop="event.stopPropagation(); event.preventDefault(); handleDrop(event);"> 
    Drop files 
</div> 

的JavaScript

function handleFiles(file) { 
    console.log(file); 
    // do stuff with `File` having `type` including `image` 
    if (/image/.test(file.type)) { 
    var img = new Image; 
    img.onload = function() { 
     var figure = document.createElement("figure"); 
     var figcaption = document.createElement("figcaption"); 
     figcaption.innerHTML = file.name; 
     figure.appendChild(figcaption); 
     figure.appendChild(this); 
     document.body.appendChild(figure); 
     URL.revokeObjectURL(url); 
    } 
    var url = URL.createObjectURL(file); 
    img.src = url; 
    } else { 
    console.log(file.type) 
    } 
} 

function handleDrop(event) { 
    var dt = event.dataTransfer; 
    var files = dt.files; 
    var length = event.dataTransfer.items.length; 
    for (var i = 0; i < length; i++) { 
    var entry = dt.items[i].webkitGetAsEntry(); 
    if (entry.isFile) { 
     // do whatever you want 
     console.log("isFile", entry.isFile); 
     entry.file(handleFiles); 
    } else if (entry.isDirectory) { 
     // do whatever you want 
     console.log("isDirectory", entry.isDirectory); 
     var reader = entry.createReader(); 
     reader.readEntries(function(entries) { 
     entries.forEach(function(dir, key) { 
      dir.file(handleFiles); 
     }) 
     }) 
    } 
    } 
} 

plnkr http://plnkr.co/edit/eGAnbA?p=preview

0

后拖动从磁盘某些文件。这个event.dataTransfer.file是你的fileList对象。 你可以创建一个formData然后 从fileList中逐个添加文件到formData。

最后,你可以提交FORMDATA到服务器阿贾克斯

相关问题