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

Question

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

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

任何解决方案？

Answer 1

您可以使用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！
• 能够在选择文件后立即上传文件，或者＃34;队列＆＃34;它们可以在以后用户上传时上传
• 在上传失败时显示来自服务器的特定错误消息（将鼠标悬停在失败的上传项目上）
• 能够自动重试上传失败
• 允许用户手动重试失败上传的选项
• 创建您自己的文件验证器和/或使用一些默认验证器，包括Fine Uploader
• 在上传过程的各个阶段接收回调
• 在服务器端发送任何参数以及每个文件。
• 通过拖放（Chrome 21 +）上传目录。
• 在查询字符串或请求正文中包含参数。
• 提交要通过API上传的文件。
• 将文件拆分为多个请求（文件分块/分区）。
• 恢复先前会话的失败/停止上传
• 删除上传的文件
• CORS支持
• 通过API上传任何Blob对象。
• 轻松设置并强制执行最大项目限制。
• 通过粘贴（Chrome）上传图片。
• 独立文件＆amp;文件夹拖放丢弃模块。默认情况下集成到FineUploader模式中。
• 在影响关联文件的回调中执行异步（非阻塞）任务
• 直接从移动设备的相机上传图片
• 检索上传文件的统计信息并接收有关状态更改的回调
• 还有更多！

或 jQuery-File-Upload plugin （与IE兼容），已有;

• 多个文件上传： 允许一次选择多个文件并同时上传。
• 拖动＆amp;掉落支持： 允许通过从桌面或文件管理器拖放文件并将其放在浏览器窗口上来上传文件。
• 上传进度条： 显示一个进度条，指示单个文件和所有上传的上传进度。
• 可取消上传： 可以取消单个文件上传以停止上传进度。
• 可恢复上传： 使用支持Blob API的浏览器可以恢复中止的上传。
• 分块上传： 大型文件可以使用支持Blob API的浏览器以较小的块上传。
• 客户端图片大小调整： 使用支持所需JS API的浏览器，可以在客户端自动调整图像大小。
• 预览图片： 在使用支持所需JS API的浏览器上载之前，可以显示图像文件的预览。
• 不需要浏览器插件（例如Adobe Flash）： 该实现基于HTML5和JavaScript等开放标准，不需要额外的浏览器插件。
• 旧版浏览器的优秀后备： 如果支持，则通过XMLHttpRequests上传文件，并使用iframe作为旧版浏览器的后备。
• HTML文件上传表格后备： 如果禁用JavaScript，则显示标准HTML文件上载表单。
• 跨站点文件上传： 支持使用跨站点XMLHttpRequests将文件上载到其他域。
• 多个插件实例： 允许在同一网页上使用多个插件实例。
• 可自定义和可扩展： 提供API以设置各个选项并为各种上载事件定义callBack方法。
• 分段和文件内容流上传： 文件可以作为标准上传＆＃34; multipart / form-data＆＃34;或文件内容流（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 2

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

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

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;铬; 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 4

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

Answer 5

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

我找到的唯一解决方案是Uploadify，这不是完美的，但可以胜任。最大的缺点是没有拖拽支撑。

坦率地说，所有这些新小部件都要好得多，但开发人员似乎反对在Flash for IE中实现回退解决方案。