软件系统定制开发组件分享之前端组件——软件系统定制开发文件上传小部件-File-Upload

背景

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

组件基本信息

• 组件：
• 开源协议：

内容

本次分享的组件是文件上传小部件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 install blueimp-file-upload

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

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

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

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

强制性要求

• v1.7+
• v1.9+(包括)：基本文件上传插件所必需的，但非常轻量级，没有 jQuery UI 套件的任何其他依赖项。
• (包含)： 。

可选要求

• v3+：用于渲染选定和上传的文件。
• v2+：图像预览和调整大小功能所必需的。
• v3+：调整大小功能所必需的。
• v2+：用于在灯箱中显示上传的图像。
• v3+：用于演示设计。
• 图标集。

本文声明：

本作品由 采用 进行许可。