组件分享之前端组件——文件上传小部件jQuery-File-Upload

背景

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

组件基本信息

• 组件：jQuery-File-Upload
• 开源协议：MIT license

内容

本次分享的组件是文件上传小部件jQuery-File-Upload，具有多个文件选择、拖放支持、进度条、验证和预览图像、jQuery 音频和视频。支持跨域、分块和可恢复的文件上传和客户端图像大小调整。适用于任何支持标准 HTML 表单文件上传的服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go 等）。

功能

• 多个文件上传:
  允许同时选择多个文件并上传。
• 拖动,Drop support:
  允许从你的桌面或文件管理器拖拽文件，并将它们放到你的浏览器窗口。
• 上传进度条:
  显示一个进度条，显示单个文件的上传进度，也显示所有文件的上传进度。
• 可取消上传:
  可取消单个文件的上传，以停止上传进度。
• 断点续传:
  中断的断点续传可以在支持Blob API的浏览器中恢复。
• 分块上传:
  支持Blob API的浏览器可以将大文件以较小的块上传。
• 客户端图像调整大小:
  图像可以自动调整客户端浏览器支持所需的JS api。
• 图片、音频、视频预览:
  支持支持api的浏览器，支持在上传前预览图片、音频、视频文件。
• 无需浏览器插件(如Adobe Flash):
  实现基于HTML5和JavaScript等开放标准，不需要额外的浏览器插件。
• 传统浏览器的优雅回退:
  通过xmlhttprequest上传文件(如果支持)，并使用iframes作为回退。
• HTML文件上传表单回退:
  允许使用标准的HTML文件上传表单作为小部件元素逐步增强。
• 跨站点文件上传:
  支持跨站点xmlhttprequest或iframe重定向上传文件到不同的域。
• 多个插件实例:
  允许在同一个网页上使用多个插件实例。
• 可定制和可扩展:
  提供一个API来设置个人选项和定义各种上传事件的回调方法。
• 多部分和文件内容流上传:
  文件可以按照标准的“多部分/表单数据”或文件内容流(HTTP PUT文件上传)上传。
• 兼容任何服务器端应用程序平台:
  与任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go等)，支持标准的HTML表单文件上传。

jQuery File Upload 可以通过NPM安装：

npm install blueimp-file-upload

这允许您通过 包含jquery.fileupload.js及其扩展node_modules，例如：

< script  src =" node_modules/blueimp-file-upload/js/jquery.fileupload.js " > </ script >

然后可以通过以下方式在文件上传表单上初始化小部件：

$('#fileupload').fileupload();

强制性要求

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

可选要求

• JavaScript 模板引擎 v3+：用于渲染选定和上传的文件。
• JavaScript 加载图像库 v2+：图像预览和调整大小功能所必需的。
• JavaScript Canvas to Blob polyfill v3+：调整大小功能所必需的。
• blueimp Gallery v2+：用于在灯箱中显示上传的图像。
• Bootstrap v3+：用于演示设计。
• Bootstrap 使用的Glyphicons图标集。

本文声明：

88x31.png
知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。