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

Posted 2023-02-24

技术标签:

【中文标题】简单的跨浏览器，带有进度条的 jQuery/PHP 文件上传 [关闭]【英文标题】：Simple cross-browser, jQuery/PHP file upload with progress bar [closed] 【发布时间】：2012-05-15 16:03:16 【问题描述】：

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

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

有什么解决办法吗？

【问题讨论】：

正如标题所说，我在服务器端使用 php 【参考方案1】：

使用这个：

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;铬合金; 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/

希望这会有所帮助。

【讨论】：

这些方法有问题，IE不显示进度条:( @Boni: webappers.com/2011/01/24/… 这就是你要找的。这是无闪烁的，并且支持 IE 中的进度条。 @AlphaMale "Microsoft Internet Explorer 不支持多文件选择或上传进度。"来自github.com/blueimp/jQuery-File-Upload @AlphaMale：上面的例子只是随机的例子。然而，他们都没有支持或回答这个问题：IE 的功能进度条。这些示例都没有功能性进度条。【参考方案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 的浏览器上传之前，可以显示图像文件的预览。无需浏览器插件（例如 Adobe 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 等）。