简单的跨浏览器,带进度条的jQuery / PHPfile upload
我知道这里有几个主题,但没有一个提供了一个file upload脚本的明确解决scheme:
- 适用于IE7 +
- 有一个进度条(在每个浏览器上)
- 没有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://www.plupload.com/在多个运行时可用,并具有优雅的降级。; 如果支持HTML5,也可以拖放上传。
用这个:
http://valums.com/ajax-upload/
没有Flash,简单的JQuery。
特征
- 多个文件select,FF,Chrome,Safari中的进度条
- 拖放文件在FF,Chrome中select
- 上传是可以取消的
- 没有外部依赖
- 不使用Flash
- 完全使用https
- 键盘支持FF,Chrome,Safari
- 在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
无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。