belhard / jquery-file-upload
jQuery 文件上传小部件。
This package is not auto-updated.
Last update: 2024-09-26 06:54:54 UTC
README
内容
描述
jQuery 的多文件选择、拖放支持、进度条、验证和预览图片、音频和视频文件的上传小部件。
支持跨域、分块和可恢复的文件上传以及客户端图像缩放。
适用于任何支持标准 HTML 表单文件上传的服务器端平台(PHP、Python、Ruby on Rails、Java、Node.js、Go 等)。
演示
功能
- 多文件上传
允许一次性选择多个文件并同时上传。 - 拖放支持
允许通过从您的桌面或文件管理器拖动文件并将它们拖放到浏览器窗口来上传文件。 - 上传进度条
显示进度条,指示单个文件和所有上传的综合上传进度。 - 可取消上传
可以取消单个文件的上传以停止上传进度。 - 可恢复上传
中断的上传可以在支持 Blob API 的浏览器中恢复。 - 分块上传
支持通过支持 Blob API 的浏览器将大文件分成更小的块上传。 - 客户端图像缩放
支持在支持所需的 JS API 的浏览器上自动缩放图像。 - 预览图像、音频和视频
在支持所需的 API 的浏览器上,可以在上传前显示图像、音频和视频文件的预览。 - 无需浏览器插件
实现基于开放标准(如 HTML5 和 JavaScript)且无需额外的浏览器插件。 - 对旧浏览器的优雅降级
如果支持,则通过 XMLHttpRequests 上传文件,并使用 iframe 作为旧浏览器的降级方案。 - HTML 文件上传表单降级
允许通过使用标准 HTML 文件上传表单作为小部件元素来实现渐进增强。 - 跨站文件上传
支持使用跨站 XMLHttpRequests 或 iframe 重定向将文件上传到不同的域。 - 多个插件实例
允许在同一网页上使用多个插件实例。 - 可定制和可扩展
提供 API 以设置单个选项并为各种上传事件定义回调方法。 - 多部分和文件内容流上传
文件可以作为标准的 "multipart/form-data" 或文件内容流(HTTP PUT 文件上传)上传。 - 与任何服务器端应用程序平台兼容
适用于任何支持标准 HTML 表单文件上传的服务器端平台(PHP、Python、Ruby on Rails、Java、Node.js、Go 等)。
安全性
⚠️ 请阅读 VULNERABILITIES 文档以获取已修复漏洞的列表
请阅读 SECURITY 文档以获取有关如何为文件上传安全配置您的 Web 服务器的说明
设置
jQuery File Upload 可以通过 NPM 安装
npm install blueimp-file-upload
这允许您通过 node_modules
包含 jquery.fileupload.js 及其扩展,例如
<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
小部件可以通过以下方式在文件上传表单中初始化:
$('#fileupload').fileupload();
有关更多信息,请参阅以下指南:
需求
必须需求
- jQuery v1.7+
- jQuery UI widget factory v1.9+(包含):基本文件上传插件所需的,但非常轻量级,不依赖于jQuery UI套件中的任何其他组件。
- jQuery Iframe Transport插件(包含):对于不支持XHR文件上传的浏览器是必需的。
可选需求
- JavaScript Templates引擎 v3+:用于渲染选定的和上传的文件。
- JavaScript Load Image库 v2+:用于图像预览和缩放功能。
- JavaScript Canvas to Blob polyfill v3+:用于缩放功能。
- blueimp Gallery v2+:用于在灯箱中显示上传的图像。
- Bootstrap v3+:用于演示设计。
- Glyphicons图标集由Bootstrap使用。
跨域需求
使用Iframe Transport插件进行跨域文件上传需要将请求重定向回源服务器以检索上传结果。示例实现使用result.html作为源服务器的静态重定向页面。
仓库还包括jQuery XDomainRequest Transport插件,该插件可在Microsoft Internet Explorer 8和9(IE 10支持跨域XHR请求)中启用有限的跨域AJAX请求。
XDomainRequest对象仅允许GET和POST请求,不支持文件上传。它在演示中用于从跨域文件上传服务中删除上传的文件。
浏览器
桌面浏览器
File Upload插件定期与最新的浏览器版本进行测试,并支持以下最低版本:
- Google Chrome
- Apple Safari 4.0+
- Mozilla Firefox 3.0+
- Opera 11.0+
- Microsoft Internet Explorer 6.0+
移动浏览器
File Upload插件已与以下移动浏览器进行测试并支持:
- Apple Safari在iOS 6.0+
- Google Chrome在iOS 6.0+
- Google Chrome在Android 4.0+
- Android 2.3+的默认浏览器
- Opera Mobile 12.0+
扩展浏览器支持信息
有关每个浏览器版本支持的功能的详细概述以及已知的操作系统/浏览器错误,请参阅扩展浏览器支持信息。
测试
项目包含三组测试
- 使用ESLint进行代码检查。
- 使用Mocha进行单元测试。
- 使用blueimp/wdio进行端到端测试。
要运行测试,请按照以下步骤操作:
- 启动 Docker。
- 安装开发依赖
npm install
- 运行测试
npm test
支持
本项目正在积极维护,但没有任何官方支持渠道。
如果您有一个其他开发者可能能帮助您的问题,请发布到 Stack Overflow,并在问题中添加标签 blueimp jquery file upload
。
许可
在 MIT 许可证下发布。