关于js或jquery进度条实现？

Posted 2023-05-18

我现在有个表单，里面有很多要填的选项，我要对每个选项进行监控。比如初始化时全部没填，则进度条显示为0%，如果每填一项则进度条自动增加5%，以此类推，全部填完则100%，如何实现这样的功能？类似51job简历中心填写简历那样....

参考技术A 写一个div定义宽高，下面铺一个背景图片，作为进度条为空的情况。
再在div内部加添加一个img图片，这个图片要可以左右延展的。然后用javascript动态控制图片的宽度即可，实现进度展现。本回答被提问者采纳 参考技术B jquery有进度条插件,设置起来很方便的,LZ找找吧

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

【中文标题】简单的跨浏览器，带有进度条的 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 的浏览器上传之前，可以显示图像文件的预览。 无需浏览器插件（例如 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，您可以从众多上传者中进行选择。

【讨论】：

这个方法有问题，IE不显示进度条:(

【参考方案3】：

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

【参考方案4】：

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

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

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

【参考方案5】：

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

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