组件分享之前端组件——文件上传小部件jQuery-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​​安装：

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-File-Upload_jquery

88x31.png


​​知识共享许可协议​​

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