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

Question

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

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

有什么解决办法吗？

score 38 · Accepted Answer

您可以使用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 和图像文件都可以省略。
不使用闪存
完全使用 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 上传文件，并使用 iframe 作为旧版浏览器的后备。
HTML 文件上传表单后备：如果禁用 JavaScript，则显示标准 HTML 文件上传表单。
跨站点文件上传：支持使用跨站点 XMLHttpRequest 将文件上传到不同的域。
多个插件实例：允许在同一网页上使用多个插件实例。
可定制和可扩展：提供 API 来设置各个选项并为各种上传事件定义回调方法。
多部分和文件内容流上传：文件可以作为标准“多部分/表单数据”或文件内容流（HTTP PUT 文件上传）上传。
兼容任何服务器端应用程序平台：适用于任何支持标准 HTML 表单文件上传的服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go 等）。

参考

查看10 个使用 jQuery 上传 HTML5 文件的示例，了解一些适用于 HTML5 的出色文件上传器

此外，这里有10+ PHP Ajax 上传文件教程 - 免费下载，您可以从很多上传者中进行选择。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

用这个：

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

没有 Flash，简单的 Jquery。

特征

FF、Chrome、Safari 中的多文件选择、进度条

FF、Chrome中的拖放文件选择

上传是可以取消的

没有外部依赖

不使用 Flash

完全使用 https

FF、Chrome、Safari 中的键盘支持

在 IE7,8 中测试；火狐 3,3.6,4; 野生动物园4,5; 铬合金; 歌剧10.60；

混帐：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/

希望这可以帮助。