jQuery File Upload

描述

文件上传小部件，支持多文件选择、拖放、进度条、验证和预览图像、音频和视频，适用于 jQuery。
支持跨域、分块和可断点续传文件上传以及客户端
图像大小调整。
适用于任何支持标准 HTML 表单文件上传的服务器端平台（PHP、Python、Ruby on Rails、Java、
Node.js、Go 等）。

Demo

Demo File Upload

功能

• 多文件上传：
  允许一次选择多个文件并同时上传。

• 支持拖放：
  允许将文件从桌面或文件管理器拖放到浏览器窗口进行上传。

• 上传进度条：
  显示进度条，指示单个文件和所有上传文件的总上传进度。

• 可取消上传：
  可以取消单个文件上传以停止上传进度。

• 可续传：
  使用支持 Blob API 的浏览器可以续传已中止的上传。

• 分块上传：
  使用支持 Blob API 的浏览器，可以将大文件分成较小的块上传。

• 客户端图片大小调整：
  使用支持所需 JS API 的浏览器，可以在客户端自动调整图片大小。

• 预览图片、音频和视频：
  在支持所需 API 的浏览器上，上传图片、音频和视频文件前可预览。

• 无需浏览器插件（例如 Adob​​e Flash）：
  该功能基于 HTML5 和 JavaScript 等开放标准实现，
  无需额外的浏览器插件。

• 优雅地支持旧版浏览器：
  如果支持，则通过 XMLHttpRequest 上传文件，并使用 iframe 作为旧版浏览器的后备方案。

• HTML 文件上传表单后备方案：
  允许使用标准 HTML 文件上传表单作为小部件元素，
  逐步增强功能。

• 跨站文件上传：
  支持使用跨站 XMLHttpRequest 或 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();

更多信息，请参阅以下指南：

• 主文档页面
• 所有可用选项列表
• 插件 API
• 如何在您的网站上设置插件
• 如何仅使用基本插件

要求

强制要求

• jQuery v1.7+
• jQuery UI 小部件工厂 v1.9+
  （已包含）：基本文件上传插件必备，但非常轻量级
  无需 jQuery UI 套件的任何其他依赖项。
• jQuery iframe 传输插件
  （已包含）：
  不支持 XHR 文件上传的浏览器 必备。

可选要求

• JavaScript 模板引擎
  v3+：用于渲染所选文件和上传的文件。
• JavaScript 加载图片库
  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 中启用有限的跨域 AJAX 请求（IE 10 支持跨域 XHR 请求）。
XDomainRequest 对象仅允许 GET 和 POST 请求，不支持
文件上传。它在
Demo 中用于从跨域演示文件上传服务中删除已上传的文件。

浏览器

桌面浏览器

文件上传插件会定期使用最新浏览器版本进行测试，并
支持以下最低版本：

• Google Chrome
• Apple Safari 4.0+
• Mozilla Firefox 3.0+
• Opera 11.0+
• Microsoft Internet Explorer 6.0+

移动浏览器

文件上传插件已使用以下移动浏览器进行测试，并支持以下移动浏览器：

• iOS 6.0+ 上的 Apple Safari
• iOS 6.0+ 上的 Google Chrome
• Android 4.0+ 上的 Google Chrome
• Android 2.3+ 上的默认浏览器
• Opera Mobile 12.0+

扩展浏览器支持信息

有关每个浏览器版本支持的功能以及已知操作系统/浏览器错误的详细概述，请参阅
扩展浏览器支持信息。

测试

该项目包含三套测试：

1. 使用 ESLint 进行代码 linting。
2. 使用 Mocha 进行单元测试。
3. 使用 blueimp/wdio 进行端到端测试。

要运行测试，请按照以下步骤操作：

1. 启动 Docker。
2. 安装开发依赖项：

npm install

3. 运行测试：

npm test

支持

该项目正在积极维护，但没有官方支持渠道。
如果您有其他开发者可能帮助您解决的问题，请
发帖至
Stack Overflow
并在您的问题中添加“blueimp jquery file upload”标签。

许可证

根据 MIT 许可证 发布。