So lesen Sie Dateien aus dem Ordner

Question

Diesen Artikel gefunden, der zeigt, wie Dateiupload vom Verzeichnis How to handle dropped folders zu unterscheiden ist, aber sie erklären nicht, wie ich den Verzeichnisupload handhaben kann. Schwierigkeiten haben, ein Beispiel zu finden. Wer weiß, wie man File Instanz jeder Datei in Verzeichnis?

aus diesem Artikel kopiert:

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

Answer 1

Verwenden DirectoryReaderdirectoryEntry.createReader(), readEntries() für Ordner oder FileEntryfile() für einzelne oder mehrere Datei Tropfen einreichen.

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

Answer 2

Nachdem Sie einige Datei von Ihrer Festplatte ziehen. Diese event.dataTransfer.file ist Ihr fileList-Objekt. Sie könnten eine formData dann erstellen Fügen Sie Dateien von fileList einzeln zu FormData.

Am Ende können Sie Formulardaten an den Server mit Ajax