Gibt es ein gutes Plugin zum Hochladen von jQuery-Dateien per Drag & Drop? [geschlossen]

174

Gibt es ein ordentliches jQuery-Plugin, mit dem Sie ein einzelnes JS-Skript einfügen und dann mit einem einfachen Snippet ein Formular aktivieren können? Etwas wie das:

$j('#MyForm').enableDragDropUploads('.upload-area')

Das Upload-Ziel ist die Aktion des Formulars.

Jede Lösung darf nicht verhindern, dass ein reguläres Dateifeld verwendet werden kann (unter Verwendung der herkömmlichen Suchmethode).

Ich brauche immer nur eine Datei, obwohl es natürlich keine schlechte Sache ist, die Option für mehrere zu haben.

Ich habe einige Beispiele für Drag-Drop-Uploads gefunden:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http: //www.appelsiini. net / 2009/10 / html5-Drag-and-Drop-Upload mehrerer Dateien

Aber der Code dort ist nicht als Plugin eingerichtet. Es ist wahrscheinlich nicht allzu schwierig, dies zu ändern, aber es macht auch keinen Sinn, dies zu tun, wenn jemand anderes diese Arbeit bereits erledigt hat und einfach meinen Google-Suchanfragen ausweicht.

Ich suche idealerweise eine reine HTML5 / jQuery-Lösung.
Eine Google Gears-Lösung ist akzeptabel, eine Flash-Lösung jedoch nicht.

jquery file-upload drag-and-drop html google-gears Peter Boughton
quelle
3
Diese Lösung funktioniert nur in der Bleeding Edge-Version von Firefox. Es gibt derzeit keine Unterstützung außerhalb von Firefox 3.6. Da dies der Fall ist, ist es unwahrscheinlich, dass Sie ein jQuery-Plugin dafür finden, und Sie müssten es höchstwahrscheinlich selbst erstellen.
Jojo
1
Bah. Die Alpha-Version ist seit ein paar Monaten erhältlich, das sollte lang genug sein. : / Ich denke, ich werde das Plugin dann selbst erstellen. Beantwortet die Frage, sobald ich fertig bin.
Peter Boughton
@ PeterBoughton Wenn Sie dieses Plugin noch nicht fertiggestellt haben, möchten Sie möglicherweise eine Antwort akzeptieren
Basic
Vielen Dank für die schnelle Basic. Ich habe das seit Ewigkeiten nicht mehr angeschaut, aber es scheint einen klaren Favoriten zu geben (und auf den ersten Blick scheint es anständig zu sein), also werde ich diesen akzeptieren.
Peter Boughton
Einen schnellen, außergewöhnlich unterstützten und funktionsreichen JavaScript-Uploader ohne Abhängigkeiten finden Sie unter Fine Uploader , früher bekannt als valums / file-uploader.
Ray Nicholus

Antworten:

134

Schauen Sie sich diese an: http://aquantum-demo.appspot.com/file-upload

Es behandelt auch das Hochladen mehrerer Dateien!

Ciaran
quelle
7
Gerade getestet. Es ist sehr schön für Chrome und Firefox. Verschlechtert sich auf den normalen Upload-Button unter IE. (aber deshalb ist es blitzfrei ...)
Frank Nocke
2
Ich suche auch nach einem Plugin zum Hochladen von Dateien. Dieses funktioniert jetzt nicht - 2015 (vielleicht hat es 2011 funktioniert). Kennt jemand ein funktionierendes Plugin zum Hochladen von Dateien?
Eran Meir
30

Überprüfen Sie die vor kurzem aus 1 freigegeben Upload - Handler von den Jungs, die den TinyMCE Editor erstellt. Es hat ein jQuery-Widget und sieht aus wie es eine Reihe von Funktionen und Fallbacks hat.

http://www.plupload.com/

Aaron Wagner
quelle
Ich würde empfehlen, plupload zu verwenden, da es andere Technologien für die beste Benutzererfahrung nutzt.
Rickyduck
Die all_runtime funktioniert nicht für mich in Chrome 15, was der Punkt sein sollte, versuchen Sie es selbst: plupload.com/example_all_runtimes.php
Erik Johansson
1
Es ist nicht kostenlos für den kommerziellen Gebrauch (verwendet GPL für die kostenlose Version)
Sachin Joseph
15

Wenn Sie noch nach einem suchen, habe ich gerade meinen veröffentlicht: http://github.com/weixiyen/jquery-filedrop

Funktioniert derzeit für Firefox 3.6. Ich habe mich entschlossen, den Chrome-Hack vorerst nicht durchzuführen und Webkit in den nächsten Versionen von Safari und Chrome FileReader () einholen zu lassen.

Dieses Plugin ist zukunftskompatibel.

FileReader () ist der offizielle Standard für etwas wie XHR.getAsBinary (), das laut Mozilla veraltet ist.

Es ist auch das einzige mir bekannte HTML5-Desktop-Drag & Drop-Plugin, mit dem Sie zusätzliche Daten zusammen mit der Datei senden können, einschließlich Daten, die zum Zeitpunkt des Uploads mit einer Rückruffunktion berechnet werden können.

resopollution
quelle
1
Die Dokumentation ist etwas dünn (auch jetzt noch im Jahr 2013), aber sie funktioniert anständig gut.
Dansan
1
Aber keine Demo?! was ist damit.
Sagive SEO
15

Wenn Sie nach einem suchen, der nicht auf Flash basiert, ist dropzonejs ein guter Ruf. Es unterstützt mehrere Dateien und Drag & Drop.

http://www.dropzonejs.com/

Ross Gledhill
quelle
Ihre ursprüngliche Empfehlung wurde im März auf github.com/Widen/fine-uploader verschoben .
Ray Nicholus
Dank dafür. Sieht so aus, als wäre es jetzt ein kostenpflichtiges Angebot (für den kommerziellen Gebrauch).
Ross Gledhill
Das ist richtig. Wir können nicht das Maß an Support und Entwicklungsgeschwindigkeit anbieten, das wir kostenlos anbieten.
Ray Nicholus
Hier ist ein nettes Tutorial zum Hochladen von Drag & Drop-Bildern mit dropzonejs goo.gl/FVdkS0
Satinder singh
Nicht einfach in vorhandene Form zu integrieren. Deshalb habe ich mich entschieden, mich von Dropzone zu entfernen.
Usman Khalid
9

Ich habe ein Plugin erstellt, mit dem Sie einige Dateien in einem bestimmten Bereich ablegen können. Dieses Plugin funktioniert derzeit in Firefox, Safari und Chrome.

http://code.google.com/p/dnd-file-upload/

user340084
quelle
8

Schamloser Stecker:

Filepicker.io übernimmt das Hochladen für Sie und gibt eine URL zurück. Es unterstützt Drag & Drop, Cross-Browser. Außerdem können Benutzer von Dropbox / Facebook / Gmail hochladen, was auf einem mobilen Gerät sehr praktisch ist.

Liyan Chang
quelle
4

Wie wäre es mit der neuesten Version von jQuery Fileuploader: http://pixelcone.com/fileuploader/

Es ist ein leistungsstarkes Plugin zum Hochladen von Dateien, das im Vergleich zu anderen Plugins sehr einfach einzurichten ist und jetzt die HTML5-API unterstützt.

John Laniba
quelle
1
Unter welchen Lizenzen ist jQuery Fileuploader verfügbar? Sie sollten dies sowohl auf Ihrer Website als auch im Quellcode Ihres Plugins klarstellen, denke ich. :)
OpaCitiZen
Defekter Link, ist dieser korrekt?
Puce