Czy istnieje dobra wtyczka do przesyłania plików jQuery typu "przeciągnij i upuść"? [zamknięte]

Czy istnieje ładny tidy jQuery plugin, który pozwala na włączenie pojedynczego skryptu JS, a następnie za pomocą prostego urywku, aby włączyć formularz? Coś takiego:

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

Z celem przesłania jest działanie formularza.

Żadne rozwiązanie nie może uniemożliwiać używania zwykłego pola pliku (przy użyciu tradycyjnej metody przeglądania).

Potrzebuję tylko jednego pliku na raz, choć oczywiście posiadanie opcji dla wielu nie jest złe.

Znalazłem kilka uploadów drag-drop examples:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

Ale kod nie jest ustawiony jako wtyczka. Prawdopodobnie nie jest to zbyt trudne do zmiany, ale także nie ma sensu robić tego, jeśli ktoś inny już wykonał tę pracę i po prostu unika moich wyszukiwań w Google.

Szukam czystego rozwiązania HTML5 / jQuery.
Google Gears one to dopuszczalne, ale rozwiązanie Flash nie jest.

Author: Peter Boughton, 2009-11-03

8 answers

Spójrz na to: http://aquantum-demo.appspot.com/file-upload

Obsługuje również przesyłanie wielu plików!

 134
Author: Ciaran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-05 17:57:01

Sprawdź ostatnio1 udostępnił obsługę uploadu od ludzi, którzy stworzyli edytor TinyMCE. Ma widget jQuery i wygląda na to, że ma ładny zestaw funkcji i awaryjnych.

Http://www.plupload.com/

 30
Author: Aaron Wagner,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-05 22:45:50

Http://blueimp.github.com/jQuery-File-Upload/ = świetne rozwiązanie

Zgodnie z ich docs , następujące przeglądarki obsługują przeciąganie i upuszczanie:

  • Firefox 4 +
  • Safari 5 +
  • Google Chrome
  • Microsoft Internet Explorer 10.0+
 18
Author: Tommy W,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-04 13:44:01

Jeśli nadal szukasz jednego, właśnie wypuściłem swój: http://github.com/weixiyen/jquery-filedrop

Działa teraz dla Firefoksa 3.6. Postanowiłem na razie nie robić Chrome ' a i pozwolić Webkit dogonić FileReader () w kolejnych wersjach Safari i Chrome.

Ta wtyczka jest kompatybilna z przyszłością.

FileReader() jest oficjalnym standardem nad czymś takim jak XHR.getAsBinary (), która jest przestarzała według Mozilli.

To także jedyny HTML5 pulpit drag + drop plugin tam, że wiem, który pozwala na wysyłanie dodatkowych danych wraz z plikiem, w tym danych, które mogą być obliczone w momencie przesyłania z funkcji zwrotnej.

 15
Author: resopollution,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-22 08:04:02

Jeśli szukasz takiego, który nie polega na Flashu, to dropzonejs jest dobrym krzykiem. Obsługuje wiele plików i przeciągnij i upuść.

Http://www.dropzonejs.com/

 13
Author: Ross Gledhill,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-15 10:46:23

Stworzyłem wtyczkę, która pozwala na wrzucenie niektórych plików na dany obszar. Ta wtyczka działa obecnie w Firefoksie, Safari i Chrome.

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

 9
Author: user340084,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-07 09:36:24

Bezwstydna Wtyczka:

Filepicker.io obsługuje przesyłanie za Ciebie i zwraca adres url. Obsługuje przeciąganie/upuszczanie, przeglądarkę krzyżową. Ponadto ludzie mogą przesyłać z Dropbox / Facebook/Gmail, co jest bardzo przydatne na urządzeniu mobilnym.

 8
Author: Liyan Chang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-21 23:35:41

A co z najnowszą wersją jQuery Fileuploader: http://pixelcone.com/fileuploader/

Jego potężna wtyczka do przesyłania plików, bardzo łatwa w konfiguracji w porównaniu do innych wtyczek, a teraz obsługuje html5 api.

 4
Author: John Laniba,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-08 09:52:07