组件分享之前端组件——文件上传小部件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安装：
代码语言：javascript复制npm install blueimp-file-upload这允许您通过 包含jquery.fileupload.js及其扩展node_modules，例如：
< script src =" node_modules/blueimp-file-upload/js/jquery.fileupload.js " > </ script >然后可以通过以下方式在文件上传表单上初始化小部件：
代码语言：javascript复制$('#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图标集。
本文声明：
知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
