Dateien ziehen, ablegen und zum Hochladen einreichen

8

Ich implementiere Drag & Drop von Dateien wie dies in asp.net mvc 5, aber meine Anforderung ist, wenn ich Dateien ziehe, sollte es nicht sofort hochgeladen werden. Ziehe zuerst die Dateien, Klicken Sie dann auf eine -Schaltfläche ("MetaData eingeben") , um für jede Datei einige obligatorische Eigenschaften (Metadatenname, Kategorie & amp; etc ...) einzugeben. Klicken Sie dann auf andere Schaltfläche (Senden) , um das Hochladen zu bestätigen.

Normalerweise, wenn wir eine Datei ziehen, wird sie sofort hochgeladen, ich muss sie stoppen und mache sie auf Knopfdruck (nach dem Füllen der anderen Felder). Sogar irgendeine js-Bibliothek von Drittanbietern, die ähnliche Funktionalität hat?

Ich habe viel gegoogelt, aber keine erwarteten Ergebnisse erzielt. Kann mir jemand bitte sagen, wie man diese Anforderung annimmt oder mir einige Links für diese Anforderung zur Verfügung stellt.

    
F11 24.09.2015, 14:39
quelle

4 Antworten

0

Haben Sie Dropzone.js Ссылка ausprobiert? Es scheint, dass sie Unterstützung für ein Feature haben, nach dem Sie suchen. Nachfolgend finden Sie einen Auszug der relevanten Seite. Ich habe es nicht selbst ausprobiert, sondern rein auf Dokumentation basierend einen Versuch zu prüfen, ob es Ihren Anforderungen entspricht.

  

Wenn autoProcessQueue deaktiviert ist, müssen Sie anrufen    .processQueue() selbst.

     

Dies kann nützlich sein, wenn Sie die Dateien anzeigen und den Benutzer freigeben möchten   Klicken Sie auf eine Schaltfläche zum Akzeptieren, um die Datei (en) tatsächlich hochzuladen.

    
vvs 02.10.2015, 10:32
quelle
6

Der Beispielcode, den Sie verknüpft haben, scheint jquery.filedrop.js zu verwenden, der von Weixi Yen geschrieben wurde. Sie müssen die neueste Version von ihrem Projekt nach Hause herunterladen und verwenden, damit dies funktioniert.

Sie sollten auch eine neuere Version von jQuery herunterladen und verwenden als die mit dem Beispielcode gebündelte Version. Ich habe das mit jquery 1.9.1 getestet.

Um die von Ihnen gewählte jQuery-Erweiterung zu verwenden, müssen Sie die Option beforeSend nutzen und eine eigene Funktion bereitstellen. Sie müssen außerdem Verweise auf die done() -Funktionen speichern, die Ihrer benutzerdefinierten Funktion für jede Datei zur Verfügung gestellt werden, damit Sie sie später aufrufen können, wodurch die Dateien hochgeladen werden.

Wenn Sie möchten, dass für jede Datei Meta-Felder angezeigt werden, müssen Sie den entsprechenden HTML-Code für jede Datei anhängen, damit der Benutzer sie ausfüllen kann.

Eine Zusammenfassung des Codes, den ich vorschlagen würde, ist unten:

%Vor%

Mit html ähnlich dem folgenden:

%Vor%

Das div#perfile sollte css haben, um es zu verbergen, da es nur verwendet wird, um das div zu enthalten, das in das Formular geklont werden soll, wenn eine Datei hineingezogen wird.

Ich habe einen Proof of Concept jsfiddle hier erstellt, das erlaubt natürlich nicht, dass die Dateien hochgeladen werden, aber es zeigt die JS-Seite der Dinge funktioniert. Sie müssen bis zum Ende des Javascript-Steuerfelds scrollen, um den benutzerdefinierten Code zu sehen - das Zeug oben enthält nur die JavaScript-Erweiterung, die Sie von der Home-Website des Projekts heruntergeladen haben sollten.

Dies sollte wirklich gut genug für Sie sein, um die Asp.net-Seite der Dinge zum Laufen zu bringen. Sie müssen nur die zusätzlichen vom Benutzer bereitgestellten Metadaten in einer Weise veröffentlichen, die Sie für richtig halten.

Offensichtlich sind das Barebones, du solltest es so auslegen, wie du es für richtig hältst.

    
enigma 27.09.2015 15:08
quelle
4

Da Sie nach einer Bibliothek suchen, habe ich eine vollständige Javascript-Lösung für Sie wie folgt entwickelt:

%Vor% %Vor% %Vor%

Der obige Code ist vollständig kommentiert, aber wenn Sie Hilfe benötigen, hinterlassen Sie bitte einen Kommentar.

    
Buzinas 02.10.2015 18:49
quelle
2

Nach meinen Recherchen gibt es keine Möglichkeit, den Upload manuell in jquery.filedrop zu verarbeiten. Sie können eine der Event-Funktionen wie folgt verwenden: prompt Benutzer, um einige zusätzliche Parameter wie Metadaten und etc ... einzugeben und sie dann wie folgt an die sendenden Daten anzuhängen:

%Vor%     
Amirhossein Mehrvarzi 01.10.2015 08:09
quelle