2016-04-24 111 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到服務器阿賈克斯

相關問題