简单的跨浏览器，带进度条的 jQuery/PHP 文件上传

Simple cross-browser, jQuery/PHP file upload with progress bar

提问by Tom

I know there are several topics out there about this, but none of them offered a definite solution for a file uploader script that:

我知道有几个关于此的主题，但它们都没有为文件上传器脚本提供明确的解决方案：

1. Works on IE7+
2. Has a progress bar (On every browser)
3. No Flash (Or fallback)

1. 适用于 IE7+
2. 有一个进度条（在每个浏览器上）
3. 无 Flash（或后备）

Any solutions?

任何解决方案？

回答by blasteralfred Ψ

You may use Axuploaderby AlbanX. It has got;

您可以使用AlbanX的 Axuploader。它有;

• Multi file upload on all browsers
• Multi file select on html5 browsers (not IE)
• Upload progress information on html5 browsers
• File size information on html5 browsers
• No flash, no Silverlight, on other plugins, only JavaScript
• Support IE 6+, Firefox 2+, Safari 2+, Chrome 1+
• Upload files by chunk, for more performance
• Not dependent by server max post size and max upload file size limits

• 在所有浏览器上上传多文件
• 在 html5 浏览器（非 IE）上选择多文件
• html5浏览器上传进度信息
• html5 浏览器上的文件大小信息
• 没有 flash，没有 Silverlight，在其他插件上，只有 JavaScript
• 支持 IE 6+、Firefox 2+、Safari 2+、Chrome 1+
• 按块上传文件，以获得更高的性能
• 不受服务器最大帖子大小和最大上传文件大小限制

You may also try Fine-Uploaderby Widen. It has got;

您也可以尝试Widen 的Fine-Uploader。它有;

• Multiple file select, progress-bar in FF, Chrome, and Safari
• Drag-and-drop file select in FF, Chrome, and Safari (OS X)
• Uploads are cancelable
• No external dependencies at all if using FineUploader or FineUploaderBasic. If using the optional jQuery wrapper, jQuery is of course required.
• FineUploaderBasic only requires the associated Fine Uploader javascript file. All Fine Uploader css and image files can be omitted.
• Doesn't use Flash
• Fully working with HTTPS
• Tested in IE7+, Firefox, Safari (OS X), Chrome, IOS6, and various versions of Android. IE10 is now also supported!
• Ability to upload files as soon as they are selected, or "queue" them for uploading at user's request later
• Display specific error messages from server on upload failure (hover over failed upload item)
• Ability to auto-retry failed uploads
• Option to allow users to manually retry a failed upload
• Create your own file validator and/or use some default validators include with Fine Uploader
• Receive callback at various stages of the upload process
• Send any parameters server-side along with each file.
• Upload directories via drag and drop (Chrome 21+).
• Include parameters in the query string OR the request body.
• Submit files to be uploaded via the API.
• Split up a file into multiple requests (file chunking/partitioning).
• Resume failed/stopped uploads from previous sessions
• Delete uploaded files
• CORS support
• Upload any Blob objects via the API.
• Easily set and enforce a maximum item limit.
• Upload images via paste (Chrome).
• Standalone file & folder drag & drop module. Integrated by default into FineUploader mode.
• Perform async (non-blocking) tasks in callbacks that influence the associated file or files
• Upload images directly from a mobile device's camera
• Retrieve statistics for uploaded files and receive callbacks on status changes
• And many more!

• FF、Chrome 和 Safari 中的多文件选择、进度条
• 在 FF、Chrome 和 Safari (OS X) 中拖放文件选择
• 上传可取消
• 如果使用 FineUploader 或 FineUploaderBasic，则完全没有外部依赖。如果使用可选的 jQuery 包装器，则当然需要 jQuery。
• FineUploaderBasic 只需要关联的 Fine Uploader javascript 文件。所有 Fine Uploader css 和图像文件都可以省略。
• 不使用闪存
• 完全使用 HTTPS
• 在 IE7+、Firefox、Safari (OS X)、Chrome、IOS6 和各种版本的 Android 中测试。现在也支持 IE10！
• 能够在选择文件后立即上传文件，或将它们“排队”以便稍后根据用户请求上传
• 在上传失败时显示来自服务器的特定错误消息（将鼠标悬停在失败的上传项目上）
• 能够自动重试失败的上传
• 允许用户手动重试失败的上传的选项
• 创建您自己的文件验证器和/或使用包含 Fine Uploader 的一些默认验证器
• 在上传过程的各个阶段接收回调
• 将任何参数与每个文件一起发送到服务器端。
• 通过拖放上传目录（Chrome 21+）。
• 在查询字符串或请求正文中包含参数。
• 通过 API 提交要上传的文件。
• 将文件拆分为多个请求（文件分块/分区）。
• 从以前的会话中恢复失败/停止的上传
• 删除上传的文件
• CORS 支持
• 通过 API 上传任何 Blob 对象。
• 轻松设置和执行最大项目限制。
• 通过粘贴（Chrome）上传图像。
• 独立的文件和文件夹拖放模块。默认情况下集成到 FineUploader 模式。
• 在影响关联文件的回调中执行异步（非阻塞）任务
• 直接从移动设备的相机上传图像
• 检索上传文件的统计数据并接收状态更改的回调
• 还有很多！

Or jQuery-File-Upload plugin(compatible with IE), which has got;

或者jQuery-File-Upload插件（兼容IE），它有；

• Multiple file upload: Allows to select multiple files at once and upload them simultaneously.
• Drag & Drop support: Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
• Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
• Cancelable uploads: Individual file uploads can be canceled to stop the upload progress.
• Resumable uploads: Aborted uploads can be resumed with browsers supporting the Blob API.
• Chunked uploads: Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
• Client-side image resizing: Images can be automatically resized on client-side with browsers supporting the required JS APIs.
• Preview images: A preview of image files can be displayed before uploading with browsers supporting the required JS APIs.
• No browser plugins (e.g. Adobe Flash) required: The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
• Graceful fallback for legacy browsers: Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
• HTML file upload form fallback: Shows a standard HTML file upload form if JavaScript is disabled.
• Cross-site file uploads: Supports uploading files to a different domain with Cross-site XMLHttpRequests.
• Multiple plugin instances: Allows to use multiple plugin instances on the same webpage.
• Customizable and extensible: Provides an API to set individual options and define callBack methods for various upload events.
• Multipart and file contents stream uploads: Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
• Compatible with any server-side application platform: Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

• 多文件上传：允许一次选择多个文件并同时上传。
• 拖放支持：允许通过将文件从桌面或文件管理器拖放到浏览器窗口来上传文件。
• 上传进度条：显示一个进度条，指示单个文件的上传进度和所有上传的合并进度。
• 可取消的上传：可以取消单个文件上传以停止上传进度。
• 可恢复上传：中止的上传可以通过支持 Blob API 的浏览器恢复。
• 分块上传：可以使用支持 Blob API 的浏览器将大文件分块上传。
• 客户端图像大小调整：可以在客户端使用支持所需 JS API 的浏览器自动调整图像大小。
• 预览图片：可以在上传之前使用支持所需 JS API 的浏览器显示图片文件的预览。
• 无需浏览器插件（例如 Adob​​e Flash）：该实施基于 HTML5 和 JavaScript 等开放标准，不需要额外的浏览器插件。
• 旧浏览器的优雅回退：如果支持，通过 XMLHttpRequests 上传文件，并使用 iframe 作为旧浏览器的回退。
• HTML 文件上传表单回退：如果 JavaScript 被禁用，则显示标准 HTML 文件上传表单。
• 跨站点文件上传：支持使用跨站点 XMLHttpRequests 将文件上传到不同的域。
• 多个插件实例：允许在同一个网页上使用多个插件实例。
• 可定制和可扩展：提供 API 来设置各个选项并定义各种上传事件的回调方法。
• 多部分和文件内容流上传：文件可以作为标准的“多部分/表单数据”或文件内容流（HTTP PUT 文件上传）上传。
• 与任何服务器端应用程序平台兼容：适用于任何支持标准 HTML 表单文件上传的服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go 等）。

References

参考

Check out 10 HTML5 File Upload with jQuery Exampleto see some great file uploaders which works with HTML5

查看10 HTML5 File Upload with jQuery Example以查看一些适用于 HTML5 的出色文件上传器

Also, here at 10+ PHP Ajax Upload File Tutorials - Free Downloadyou can choose from a lot of uploaders.

此外，在10+ PHP Ajax 上传文件教程 - 免费下载中，您可以从许多上传器中进行选择。

回答by user1335639

I think the following are the thing you need, they also support progressing upload well in IE by Flash component

我认为以下是您需要的东西，它们还支持通过 Flash 组件在 IE 中很好地进行上传

• http://yuilibrary.com/yui/docs/uploader/
• http://www.plupload.com/documentation.php

• http://yuilibrary.com/yui/docs/uploader/
• http://www.plupload.com/documentation.php

回答by AlphaMale

Use This:

用这个：

http://valums.com/ajax-upload/

http://valuems.com/ajax-upload/

No Flash, Simple Jquery.

没有 Flash，简单的 Jquery。

Features

特征

1. multiple file select, progress-bar in FF, Chrome, Safari
2. drag-and-drop file select in FF, Chrome
3. uploads are cancellable
4. no external dependencies
5. doesn't use Flash
6. fully working with https
7. keyboard support in FF, Chrome, Safari
8. tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

1. 多文件选择，FF、Chrome、Safari 中的进度条
2. 在 FF、Chrome 中拖放文件选择
3. 上传是可以取消的
4. 没有外部依赖
5. 不使用 Flash
6. 完全使用 https
7. FF、Chrome、Safari 中的键盘支持
8. 在 IE7,8 中测试；火狐 3、3.6、4；Safari4,5; 铬合金; 歌剧10.60；

git: https://github.com/valums/file-uploader

git: https://github.com/valuems/file-uploader

You can also use these:

您还可以使用这些：

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

https://github.com/drogus/jquery-upload-progress

https://github.com/drogus/jquery-upload-progress

http://www.albanx.com/

http://www.albanx.com/

Flash-less IE progress bar

无 Flash IE 进度条

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

Hope this helps.

希望这可以帮助。

回答by Scott Weinert

http://www.plupload.com/is available in multiple runtimes and has graceful degradation. If HTML5 is supported, it can also do drag and drop uploads.

http://www.plupload.com/可在多个运行时使用并且具有优雅的降级。如果支持 HTML5，它还可以进行拖放上传。

回答by Alex Neth

To support progress bar and multiple file upload in IE requires Flash. Unfortunately, none of the new, "flashy but flashless" widgets support this.

在 IE 中支持进度条和多文件上传需要 Flash。不幸的是，没有一个新的、“闪光但无闪光”的小部件支持这一点。

The only solution I've found is Uploadify, which is not perfect but does the job. The largest draw back is lack of drag and drop support.

我找到的唯一解决方案是Uploadify，它并不完美但可以完成工作。最大的缺点是缺乏拖放支持。

Frankly, all of these new widgets are so much better, but the developers sadly seem opposed to implementing a fallback solution in Flash for IE.

坦率地说，所有这些新小部件都好得多，但可悲的是，开发人员似乎反对在 Flash 中为 IE 实现后备解决方案。