So fügen Sie eine Datei in ein bereits vorhandenes dataTransfer-Objekt mit Javascript ein

Question

So fügen Sie eine Datei in ein bereits vorhandenes dataTransfer-Objekt mit Javascript ein

8

Annahme: Eine lokale HTML / Javascript-Webseite, die Zugriff auf Datei: //

hat

Wie füge ich zu Beginn eines Ziehens eines ziehbaren HTML-Elements in der Ereignishandlerfunktion dragStart(e) ein Dateiobjekt hinzu, so dass es als Datei erkannt wird und in der dataTransfer.files -Liste?

Beispiel:

%Vor%

Insbesondere muss es an Chrom / Chromium arbeiten. Und wir können davon ausgehen, dass die Datei auf dem lokalen Laufwerk existiert. Grundsätzlich möchte ich die gleichen Daten verfügbar, wenn eine Datei von Windows Explorer auf eine HTML-Seite auf einem Element gezogen wird, die ablegen kann.

Ich weiß, dass dies in Chrome existiert:

%Vor%

welches die Datei herunterlädt. Aber das ist nicht was ich will, weil ich annehmen möchte, dass dies eine existierende Datei ist und dass auf die Originaldatei zugegriffen werden muss.

javascript drag-and-drop file data-transfer data-transfer-objects

Kai 30.06.2014, 18:55

quelle

1 Antwort

Tags und Links javascript drag-and-drop file data-transfer data-transfer-objects

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Meteor 0.8.2 Client-Sammlung ist leer, wenn ein neues Objekt eingefügt wird

score 0 · Answer 1

Sie können den Ansatz von @kol unter Drop-Datei-Ereignis simulieren

verwenden >

Das heißt, wir müssen ein Argument an ondrop übergeben, das


hat ein dataTransfer -Feld mit einem files -Array-Unterfeld, das die ausgewählten File und
enthält
Eine preventDefault Methode (eine Funktion ohne Körper wird es tun).

wird unten angepasst, um .addEventListener("drop") an drop element an dragstart event anzuhängen, wobei File Objekte an eine gebundene Funktion mit Function.prototype.bind() übergeben werden, die das oben beschriebene Objekt zurückgibt, wobei once:true als drittes übergeben wird Parameter zu .addEventListener() , um drop event höchstens einmal für jedes dragstart -Ereignis aufzurufen, auf das File -Objekte zugegriffen oder erstellt wurden.

FileList Objekt ist schreibgeschützt, ein Array wird zum Speichern von File object verwendet bei dataTransfer.files -Eigenschaft innerhalb eines einfachen javascript -Objekts bei Event-Handlern.

Hinweis: Die FileList Schnittstelle sollte als "gefährdet" betrachtet werden seit dem allgemeinen Trend auf der Web-Plattform ist es, solche zu ersetzen Schnittstellen zu dem Array Plattformobjekt in ECMAScript [ECMA-262] . Insbesondere bedeutet dies Syntax der Sorte filelist.item(0) ist gefährdet; die meisten anderen programmatischen Verwendung von FileList ist wahrscheinlich nicht von der eventuellen Migration auf eine Array type.

Wenn event.dataTransfer.files at dragstart event File -Objekte enthält, iteriere FileList und drücke jedes File -Objekt auf files -Array.

%Vor% %Vor% %Vor%

plnkr Ссылка