有没有好的 jQuery 拖放文件上传插件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1663741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:57:00  来源:igfitidea点击:

Is there a good jQuery Drag-and-drop file upload plugin?

jqueryfile-uploaddrag-and-drophtmlgoogle-gears

提问by Peter Boughton

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this:

是否有一个漂亮整洁的 jQuery 插件,它允许包含单个 JS 脚本,然后使用一个简单的代码段来启用表单?像这样的东西:

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

With the upload target being the action of the form.

上传目标是表单的操作。

Any solution must not prevent a regular file field from being usable (using traditional browse method).

任何解决方案都不能阻止常规文件字段的使用(使用传统浏览方法)。

I only need one file at a time, though of course having the option for multiple isn't a bad thing.

我一次只需要一个文件,当然可以选择多个文件并不是一件坏事。

I've found a couple of drag-drop upload examples:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gearshttp://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

我发现一对夫妇的拖放上传的例子:
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

But the code there isn't setup as a plugin. It's probably not too difficult to change it, but also no point doing so if someone else has already done that work and is simply evading my Google searches.

但是那里的代码没有设置为插件。改变它可能并不太难,但如果其他人已经完成了这项工作并且只是逃避我的谷歌搜索,那么这样做也没有意义。

I'm ideally looking for a pure HTML5/jQuery solution.
A Google Gears one is acceptable, but a Flash solution is not.

我理想地寻找纯 HTML5/jQuery 解决方案。
Google Gears 是可以接受的,但 Flash 解决方案不是。

采纳答案by Ciaran

Have a look at this one: http://aquantum-demo.appspot.com/file-upload

看看这个:http: //aquantum-demo.appspot.com/file-upload

It also handles multiple file upload!

它还可以处理多个文件上传!

回答by Aaron Wagner

Check out the recently1released upload handler from the guys that created the TinyMCE editor. It has a jQuery widget and looks like it has a nice set of features and fallbacks.

从创建 TinyMCE 编辑器的人那里查看最近发布的1 个上传处理程序。它有一个 jQuery 小部件,看起来它有一组不错的功能和回退。

http://www.plupload.com/

http://www.plupload.com/

回答by Tommy W

http://blueimp.github.com/jQuery-File-Upload/= great solution

http://blueimp.github.com/jQuery-File-Upload/= 很好的解决方案

According to their docs, the following browsers support drag & drop:

根据他们的文档,以下浏览器支持拖放:

  • Firefox 4+
  • Safari 5+
  • Google Chrome
  • Microsoft Internet Explorer 10.0+
  • 火狐 4+
  • Safari 5+
  • 谷歌浏览器
  • 微软 Internet Explorer 10.0+

回答by Ross Gledhill

If you're looking for one that doesn't rely on Flash then dropzonejs is a good shout. It supports multiple files and drag and drop.

如果您正在寻找不依赖 Flash 的产品,那么 dropzonejs 是一个不错的选择。它支持多个文件和拖放。

http://www.dropzonejs.com/

http://www.dropzonejs.com/

回答by resopollution

If you are still looking for one, I just released mine: http://github.com/weixiyen/jquery-filedrop

如果你还在找,我刚刚发布了我的:http: //github.com/weixiyen/jquery-filedrop

Works for Firefox 3.6 right now. I decided not to do the Chrome hack for now and let Webkit catch up with FileReader() in the next versions of Safari and Chrome.

现在适用于 Firefox 3.6。我决定暂时不做 Chrome hack,让 Webkit 在 Safari 和 Chrome 的下一个版本中赶上 FileReader()。

This plugin is future compatible.

这个插件是未来兼容的。

FileReader() is the official standard over something like XHR.getAsBinary() which is deprecated according to mozilla.

FileReader() 是 XHR.getAsBinary() 之类的官方标准,根据 mozilla 已弃用。

It's also the only HTML5 desktop drag+drop plugin out there that I know of which allows you to send extra data along with the file, including data that can be calculated at the time of upload with a callback function.

它也是我所知道的唯一一个 HTML5 桌面拖放插件,它允许您随文件一起发送额外的数据,包括可以在上传时使用回调函数计算的数据。

回答by user340084

I created a plugin which allows you to drop some files onto a given area. This plugin currently works in Firefox, Safari and Chrome.

我创建了一个插件,它允许您将一些文件放到给定区域。此插件目前适用于 Firefox、Safari 和 Chrome。

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

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

回答by Liyan Chang

Shameless Plug:

无耻的插头:

Filepicker.iohandles uploading for you and returns a url. It supports drag/drop, cross browser. Also, people can upload from Dropbox/Facebook/Gmail which is super handy on a mobile device.

Filepicker.io为您处理上传并返回一个 url。它支持拖放,跨浏览器。此外,人们可以从 Dropbox/Facebook/Gmail 上传,这在移动设备上非常方便。

回答by John Laniba

How about the latest version of jQuery Fileuploader: http://pixelcone.com/fileuploader/

最新版本的 jQuery Fileuploader 怎么样:http://pixelcone.com/fileuploader/

Its a powerful file upload plugin, very easy to setup compared to other plugin, and its now support html5 api.

它是一个强大的文件上传插件,与其他插件相比非常容易设置,并且它现在支持 html5 api。