简单的跨浏览器，带有进度条的 jQuery/PHP 文件上传 [关闭]

Question

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

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

有什么解决办法吗？

Answer 1

使用这个：

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

没有 Flash，简单的 Jquery。

特点

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

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

您也可以使用这些：

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

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

http://www.albanx.com/

无 Flash IE 进度条

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

希望这会有所帮助。

Answer 2

您可以使用 AlbanX 的 Axuploader。它得到了；

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

您也可以试试 Widen 的 Fine-Uploader。它得到了；

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

或者jQuery-File-Upload plugin（兼容IE），已经搞定了；

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

参考文献

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

此外，在 10+ PHP Ajax Upload File Tutorials - Free Download，您可以从众多上传者中进行选择。

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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