Wie wird der Dateieingabewert beim Ablegen der Datei auf der Seite festgelegt? [Duplikat]
Ich versuche ein Steuerelement zu erstellen, bei dem Sie sowohl eine Datei auswählen können, die im Formular gesendet werden soll, als auch eine Datei in das Formular einfügen, um dasselbe zu tun. Ich habe so etwas, wo es auch eine Vorschau der Datei zeigt, wenn es ein Bild ist:
%Vor%Der Benutzer legt die Datei im Vorschaubild-Container ab. Die Datei wird nicht mit AJAX übermittelt, der Benutzer muss das Formular senden, das mehr Daten enthält.
Aus Sicherheitsgründen dürfen wir den Wert der Eingabedatei nicht mit JavaScript ändern. Ich weiß jedoch, dass die Standard-Eingabedatei die Drop-Funktion unterstützt, und es gibt eine Reihe von Websites, auf denen wir Dateien auswählen können, indem wir sie im Formular ablegen, so dass ich denke, dass es eine Möglichkeit gibt.
Ähnliche Frage, aber keine richtige Antwort:
Wie Dateiobjekt in Eingabedatei im Formular in HTML?
Auch nicht Drag-Drop-Bilder Eingabedatei und Vorschau vor dem Upload , weil ich bereits Drag-Drop und Vorschau erreicht habe Aktion. Meine Frage bezieht sich speziell auf das Problem, dass beim Übergeben der Datei in einen übergeordneten Container eine leere Datei eingegeben wird.
Hier ist eine Geige mit MCVE . Wie Sie sehen können, bin ich nur daran interessiert, jQuery oder reines JavaScript ohne zusätzliche Bibliotheken zu verwenden.
Obwohl dropzone.js verwendet werden könnte, passt es nicht in meine Anforderungen und es würde eine beträchtliche Menge an Zeit benötigen, um sein Aussehen anzupassen. Darüber hinaus haben dropzone.js bestimmte Konfigurationsanforderungen, die in meiner ASP.NET-Anwendung nicht erfüllt werden können.
1 Antwort
Haftungsausschluss: Korrigiert ab Dezember 2017 und nur für moderne Browser.
TL; DR: Ja, jetzt kannst du!
* wenn Sie ein dataTransfer- oder FileList-Objekt haben
Bisher wurde das Feld " input[type=file] " für das Programm programmgesteuert geändert, da bestehende Sicherheitslücken, die in modernen Browsern behoben wurden, behoben wurden.
Der letzte der wichtigsten Browser (Firefox) hat es uns kürzlich ermöglicht, die Dateien für das Eingabedateifeld festzulegen. Laut W3C-Tests scheint es, dass Sie dies bereits tun können in Google Chrome!
Relevanter Screenshot und Text aus MDN:
Sie können festlegen und erhalten den Wert von
HTMLInputElement.filesin allen modernen Browsern.
Quell- und Browserkompatibilität, siehe MDN
Der Firefox -Thread hat Demo können Sie es testen und hier ist die Quelle, wenn Sie es bearbeiten möchten . Für zukünftige Referenz, falls dieser Link abstirbt, werde ich ihn auch als ausführbaren Ausschnitt unten einfügen:
Wichtiger Hinweis:
Dies ist nur möglich, wenn Sie ein vorhandenes
FileListORdataTransfer-Objekt haben, das Sie auf das Element der Eingabedatei einstellen können (da die Setter-Methode KEINEN Text akzeptiert).Weitere Informationen finden Sie in der Antwort von Kaiido: Festlegen der Dateiobjekte und der Längeneigenschaft für das FileList-Objekt, in dem die Dateien ebenfalls wiedergegeben werden FormData-Objekt?
Nun, um Ihre ursprüngliche Frage zu beantworten, sollte es so einfach sein:
%Vor%Tags und Links javascript jquery forms events file