具有进度条的简单跨浏览器、jQuery/PHP文件上传。

Question

我知道有许多相关主题，但没有一个能够提供一种明确的解决方案来实现这样的文件上传脚本：

1. 可在IE7+上运行
2. 拥有进度条（在所有浏览器中）
3. 无需Flash（或备选方案）

有什么解决方案吗？

- Tom

---

正如标题所述，我在服务器端使用PHP。 - Tom

Answer 1

您可以使用AlbanX的Axuploader。它具有以下功能：

• 所有浏览器上的多文件上传
• HTML5浏览器（不包括IE）上的多文件选择
• HTML5浏览器上的上传进度信息
• HTML5浏览器上的文件大小信息
• 无需Flash、Silverlight或其他插件，仅使用JavaScript
• 支持IE 6+，Firefox 2+，Safari 2+，Chrome 1+
• 通过块上传文件，以提高性能
• 不受服务器最大发布大小和最大上传文件大小限制的影响

您还可以尝试Widen的Fine-Uploader。它具有以下功能：

• 在Firefox、Chrome和Safari中支持多文件选择和进度条
• 在Firefox、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插件（兼容IE），它具有以下功能;

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

参考文献

查看10个HTML5文件上传的jQuery示例，以了解一些与HTML5兼容的出色文件上传器。

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

- Alfred

---

这个方法有问题，IE浏览器不显示进度条 :( - Tom

Answer 2

我认为以下是你需要的东西，它们还通过Flash组件支持在IE中进行顺利上传进度。

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

- user1335639

Answer 3

使用这个：

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；Firefox 3、3.6、4；Safari4、5；Chrome；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/

希望这能有所帮助。

- talha2k

---

这些方法存在问题，IE浏览器不显示进度条 :( - Tom

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

这就是你要找的。它没有Flash并且支持IE中的进度条。 - talha2k

@AlphaMale：“微软Internet Explorer不支持多文件选择或上传进度。”来自https://github.com/blueimp/jQuery-File-Upload - Alex Neth

@AlphaMale：上面的例子只是随机的例子。然而，它们都没有支持或回答这个问题：如何在IE中实现功能性进度条。这些例子中没有一个是具有功能性进度条的。 - Bunkai.Satori

Answer 4

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

- Scott Weinert

Answer 5

为了在IE中支持进度条和多文件上传，需要使用Flash。不幸的是，没有任何新的“花哨但无需Flash”的小部件支持此功能。

我找到的唯一解决方案是Uploadify，虽然不完美但能胜任工作。最大的缺点是缺乏拖放支持。

坦白地说，所有这些新小部件都要好得多，但开发人员似乎不愿意为IE实现Flash的备用解决方案。

- Alex Neth