Ich habe kürzlich einen Code zu Moodle beigetragen, der einige der Möglichkeiten von HTML5 nutzt, um das Hochladen von Dateien in Formulare per Drag & Drop vom Desktop zu ermöglichen (der Kern des Codes ist hier: Ссылка zur Referenz).
Dies funktioniert gut, außer wenn ein Benutzer anstelle einer echten Datei einen Ordner / Verzeichnis zieht. Garbage wird dann auf den Server hochgeladen, aber der Dateiname entspricht dem Ordner.
Was ich suche, ist eine einfache und zuverlässige Möglichkeit, das Vorhandensein eines Ordners im Objekt FileList zu erkennen überspringe es (und gebe wahrscheinlich auch eine freundliche Fehlermeldung zurück).
Ich habe die MDN-Dokumentation sowie eine allgemeinere Websuche durchgesehen, aber nichts gefunden. Ich habe mir auch die Daten in den Chrome-Entwicklertools angesehen und es scheint, dass der Typ des Dateiobjekts konsistent auf " für Ordner festgelegt ist. Ich bin jedoch nicht ganz davon überzeugt, dass dies die zuverlässigste, browserübergreifende Erkennungsmethode ist.
Hat jemand bessere Vorschläge?
Sie können sich nicht auf file.type verlassen. Eine Datei ohne Erweiterung hat den Typ "" . Speichern Sie eine Textdatei mit der Erweiterung .jpg , und laden Sie sie in ein Dateisteuerelement. Der Typ wird als image/jpeg angezeigt. Und ein Ordner mit dem Namen "someFolder.jpg" wird auch seinen Typ als image/jpeg haben.
Versuchen Sie, die Datei mit FileReader zu lesen. Wenn ein Verzeichnis hineingezogen wird, wird FileReader das Ereignis error auslösen:
Glücklicherweise, in IE11, wenn ein Verzeichnis gelöscht wird, ist die e.dataTransfer.files Sammlung leer.
Chrome stellt eine zusätzliche Eigenschaft in e.dataTransfer namens items mit einer Sammlung von DataTransferItem -Objekten zur Verfügung. Sie können für jedes dieser Objekte item.webkitGetAsEntry() aufrufen, wodurch ein Objekt Entry zurückgegeben wird. Das Objekt Entry hat die Eigenschaften isDirectory und isFile :
Interessanterweise hatte jeder Ordner, den ich mir angesehen habe, in seinem Experiment File.size % 4096 als Null. Natürlich haben einige Dateien das auch. File.size ist kein zuverlässiger Indikator dafür, ob eine Datei tatsächlich ein Ordner ist.
Ich bin auch auf dieses Problem gestoßen und unten ist meine Lösung. Grundsätzlich hatte ich einen zweigleisigen Ansatz:
(1) Überprüfen Sie, ob die Größe des Dateiobjekts groß ist, und betrachten Sie es als eine echte Datei, wenn sie über 1 MB groß ist (ich nehme an, dass die Ordner selbst nie so groß sind). (2) Wenn das File-Objekt kleiner als 1 MB ist, lese ich es mit der 'readAsArrayBuffer'-Methode von FileReader. Erfolgreiche Lesevorgänge rufen 'onload' auf und ich glaube, dass dies darauf hinweist, dass das Dateiobjekt eine echte Datei ist. Fehlgeschlagene Leseaufrufe 'onerror' und ich betrachte es als ein Verzeichnis. Hier ist der Code:
%Vor%Ich habe dies in FF 26, Chrome 31 und Safari 6 getestet und drei Browser rufen 'onerror' auf, wenn sie versuchen, Verzeichnisse zu lesen. Lassen Sie mich wissen, wenn jemand an einen Anwendungsfall denken kann, bei dem dies nicht funktioniert.
Ich schlage vor, FileReader.readAsBinaryString für das Objekt File aufzurufen. In Firefox wird dies zu einer Ausnahme führen, wenn File ein Directory ist. Ich tue das nur, wenn File die von gilly3 vorgeschlagenen Bedingungen erfüllt.
Bitte lesen Sie meinen Blog-Beitrag unter Ссылка für mehr Details.
Auch Version 21 von Google Chrome unterstützt nun das Löschen von Ordnern. Sie können leicht überprüfen, ob die gelöschten Objekte Ordner sind, und auch deren Inhalt lesen.
Leider habe ich keine (clientseitige) Lösung für ältere Chrome-Versionen.
Eine andere Anmerkung ist, dass der Typ "" für jede Datei mit einer unbekannten Erweiterung ist. Versuchen Sie, eine Datei namens test.blah hochzuladen, und der Typ ist leer. UND ... versuche, einen Ordner namens test.jpg zu ziehen und abzulegen - der Typ wird auf "image / jpeg" gesetzt. Um 100% korrekt zu sein, kann man sich nicht nur auf den Typ verlassen (oder wenn überhaupt, wirklich).
In meinen Tests hatten Ordner immer die Größe 0 (auf FF und Chrome auf 64-Bit Windows 7 und unter Linux Mint (im Wesentlichen Ubuntu). Also überprüft mein Ordner nur, ob die Größe 0 ist und es scheint Ich möchte auch keine 0-Byte-Dateien hochladen, wenn es also 0 Byte ist, kommt die Nachricht als "Übersprungen - 0 Bytes (oder Ordner)" zurück.
Zu Ihrer Information: In diesem Beitrag erfahren Sie, wie Sie die dataTransfer-API in Chrome verwenden, um den Dateityp zu erkennen: Ссылка
Tags und Links html5 file-upload drag-and-drop moodle filelist