简单的跨浏览器,带进度条的jQuery / PHPfile upload

我知道这里有几个主题,但没有一个提供了一个file upload脚本的明确解决scheme:

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

任何解决scheme

你可以使用AlbanX的Axuploader。 它有;

  • 在所有浏览器上多file upload
  • 多文件selecthtml5浏览器(不是IE)
  • 在html5浏览器上上传进度信息
  • 在html5浏览器上的文件大小信息
  • 没有闪光灯,没有Silverlight,在其他插件,只有JavaScript
  • 支持IE 6+,Firefox 2+,Safari 2+,Chrome 1+
  • 通过块上传文件,获得更多性能
  • 不受服务器最大发布大小和最大上传文件大小限制的影响

你也可以试试Widen的Fine-Uploader 。 它有;

  • 多个文件select,FF,Chrome和Safari中的进度条
  • 在FF,Chrome和Safari(OS X)中拖放文件select
  • 上传可以取消
  • 如果使用FineUploader或FineUploaderBasic,则完全不需要外部依赖。 如果使用可选的jQuery包装器,jQuery当然是必需的。
  • FineUploaderBasic只需要相关的Fine Uploader JavaScript文件。 所有优良的上传器的CSS和图像文件可以省略。
  • 不使用Flash
  • 充分使用HTTPS
  • 经过IE7 +,Firefox,Safari(OS X),Chrome,IOS6以及各种Android版本的testing。 IE10现在也支持!
  • 能够在select文件后立即上传文件,或者在稍后按照用户请求“上传”文件进行上传
  • 在上传失败时显示来自服务器的特定错误消息(hover在失败的上传项目上)
  • 能够自动重试失败的上传
  • 允许用户手动重试失败的上传的选项
  • 创build您自己的文件validation器和/或使用Fine Uploader包含的一些默认validation器
  • 在上传过程的各个阶段接收callback
  • 每个文件随服务器端发送任何参数。
  • 通过拖放上传目录(Chrome 21+)。
  • 在查询string或请求主体中包含参数。
  • 通过API提交要上传的文件。
  • 将文件拆分成多个请求(文件分块/分区)。
  • 恢复上次会话失败/停止的上传
  • 删除上传的文件
  • CORS支持
  • 通过API上传任何Blob对象。
  • 轻松设置和强制执行最大项目限制。
  • 通过粘贴上传图片(Chrome)。
  • 独立的文件和文件夹拖放模块。 默认集成到FineUploader模式中。
  • 在影响相关文件的callback中执行asynchronous(非阻塞)任务
  • 直接从移动设备的相机上传图像
  • 检索上传文件的统计信息并接收状态更改的callback
  • 还有很多!

或者jQuery-File-Upload插件 (兼容IE),已经有了;

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

*更新

查看10个带有jQuery的HTML5file upload示例 ,查看一些可用于HTML5的优秀file upload器

此外,在这里10 + PHP的Ajax上传文件教程 – 免费下载,你可以select从很多上传。

希望这可以帮助。

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

用这个:

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

没有Flash,简单的JQuery。

特征

  1. 多个文件select,FF,Chrome,Safari中的进度条
  2. 拖放文件在FF,Chrome中select
  3. 上传是可以取消的
  4. 没有外部依赖
  5. 不使用Flash
  6. 完全使用https
  7. 键盘支持FF,Chrome,Safari
  8. 在IE7,8中testing; 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/

无IE浏览器进度条

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

希望这可以帮助。

在IE中支持进度条和多file upload需要Flash。 不幸的是,没有一个新的,“华而不实”的小部件支持这一点。

我find的唯一的解决scheme是Uploadify ,这不是完美的,但做的工作。 最大的缺点是缺乏拖放支持。

坦率地说,所有这些新的小部件都好多了,但开发人员似乎反对在Flash for IE中实施回退解决scheme。