Ich versuche, nativen HTML5-Upload mehrerer Dateien per Drag & Drop zu implementieren. Ich habe Tutorials wie Ссылка und Ссылка aber ich habe immer noch nicht die Lösung gefunden, die ich brauche.
Grundsätzlich möchte ich die Funktionalität eines HTML5 Multiple File Upload Input Elements simulieren, aber mit einem Div auf dem ich die Drop Events abhöre.
Mit anderen Worten, ich möchte ein Formular wie dieses machen:
%Vor%Arbeite so, als wäre es so gemacht:
%Vor%Das Drag & Drop-Feld sollte als Teil des Formulars behandelt werden, und wenn das Formular gesendet wird, möchte ich nur, dass alle Daten von den Eingaben sowie das Array der Dateien aus dem Drag & Drop-Feld gesendet werden über AJAX zum Server.
Bisher habe ich nur das Lesen der Dateinamen bei einem Drop-Event implementiert. Ich möchte, dass alle gelöschten Dateien zu einem Array hinzugefügt werden, aber ich weiß nicht, wie ich auf die Dateien selbst zugreifen kann, nicht auf ihre Attribute, so dass ich diese Dateien auf dem Formular abschicken kann, über AJAX zusammen mit dem Rest der Datei Formulardaten.
Ich möchte etwas wie:
%Vor%Ich weiß auch, dass es Plugins dafür gibt, aber ich möchte es nativ machen.
Hier ist eine einfache Implementierung eines Drag & amp; drop-Datei gut mit Vanille jQuery und ein [Eingabetyp="Datei"]. Es akzeptiert eine einzelne Datei.
%Vor%Ich weiß, du hast die Antwort schon vor Jahren :) aber hier ist eine 2017er Lösung, hauptsächlich für Leute wie mich, die nach einer gut aussehenden Lösung suchen: Sie können es mit der Dateieingabe tun, Es wird mit modernen Browsern arbeiten, für IE müssen Sie ein Fallback verwenden.
Wenn Sie auch die Namen der Dateien und eine etwas ausgefallenere Benutzeroberfläche nur mit Ihnen verwenden möchten, können Sie mein Beispiel verwenden;
Dieser Code kann auf jedes Formular angewendet werden und macht genau das.
Tags und Links jquery ajax html5 drag-and-drop