jQuery File Upload-优快云博客

https://blueimp.github.io/jQuery-File-Upload/index.html

https://github.com/blueimp/jQuery-File-Upload#description

鉴于此项目并无中文文档，特写此文档。翻译以及理解不当之处，还请见谅并指正，不胜感激。

Demo

Demo 演示地址：https://blueimp.github.io/jQuery-File-Upload/index.html

File Upload widget with multiple file selection,drag&drop support, progress bars, validation and preview images, audio andvideo for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side imageresizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js,Go etc.) that supports standard HTML form file uploads.

jQuery多文件上传插件，支持拖拽上传和删除，有上传进度条显示，有验证和预览，支持视频和音频文件。支持跨域、分块上传、断点续传和在客户端改变图片大小。支持的服务端平台（PHP, Python, Ruby on Rails, Java, Node.js等），前提是服务端平台支持标准的htmlfile空间提交。

Demo Notes

The maximum file size for uploads in this demo is 999 KB (default file size is unlimited).
Only image files (JPG, GIF, PNG) are allowed in this demo (by default there is no file type restriction).
Uploaded files will be deleted automatically after 5 minutes or less (demo files are stored in memory).
You can drag & drop files from your desktop on this webpage (see Browser support).
Please refer to the project website and documentation for more information.
Built with the Bootstrap CSS framework and Icons from Glyphicons.

Demo中的注意事项

文件上传的大小限制为999KB（默认无限制）
允许的文件类型为JPG, GIF, PNG（默认无文件类型限制）
上传的文件存储在内存中并且会在五分钟内自动删除
可以拖拽上传和删除（参见支持的浏览器）
请在项目主页和文档中获取更多信息
采用bootstrap 的css样式，图标来自Glyphicons

主题

Basic Plus UI

源码

地址：https://github.com/blueimp/jQuery-File-Upload

ReadeMe

Setup

设置

如何在你的网站上安装插件
最小设置向导

Features

Multiple file upload:
Allows to select multiple files at once and upload them simultaneously.
Drag & Drop support:
Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
Upload progress bar:
Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
Cancelable uploads:
Individual file uploads can be canceled to stop the upload progress.
Resumable uploads:
Aborted uploads can be resumed with browsers supporting the Blob API.
Chunked uploads:
Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
Client-side image resizing:
Images can be automatically resized on client-side with browsers supporting the required JS APIs.
Preview images, audio and video:
A preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs.
No browser plugins (e.g. Adobe Flash) required:
The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
Graceful fallback for legacy browsers:
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
HTML file upload form fallback:
Allows progressive enhancement by using a standard HTML file upload form as widget element.
Cross-site file uploads:
Supports uploading files to a different domain with cross-site XMLHttpRequests or iframe redirects.
Multiple plugin instances:
Allows to use multiple plugin instances on the same webpage.
Customizable and extensible:
Provides an API to set individual options and define callBack methods for various upload events.
Multipart and file contents stream uploads:
Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
Compatible with any server-side application platform:
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

特性

多文件上传：

允许一次选择多张图片并同时上传

拖拽支持：

允许从桌面和文件拖拽上传和从浏览器拖拽删除

上传进度条:
除了每个文件有一个单独的进度条外，还有一个总进度条
取消上传:
每个文件都支持取消上传
上传失败可恢复:

支持Blob API的浏览器都可以在上传失败之后重新上传。

分块上传:

支持Blob API的浏览器会将大文件分为小块文件进行上传

客户端重新定义图片大小:

只要引入需要的js APIs，图片会自动重新定义大小

预览图片、音频、视频:
只要引入需要的js APIs，就会在上传之前显示预览

不需要浏览器插件支持（如Adobe Flash）

在HTML5和JavaScript的开放标准上进行的实现

老式浏览器实现方式:

老式浏览器如果支持XMLHttpRequests，就通过XMLHttpRequests进行上传文件的提交，用iframes作为后备

HTML文件上传表单后备:
允许渐进增强通过使用一个标准的HTML文件上传表单部件元素.
跨域提交:

可以通过跨域的XMLHttpRequests或者iframe重定向进行跨域提交

多插件示例:
同一个页面允许有多个插件示例
自定义和扩展:

提供API为各种上传事件设置选项和定义返回时调用的方法

多部分和文件内容流上传:

文件可以通过multipart/form-data方式或者文件内容流方式进行上传(HTTP PUT file upload)

兼容任何服务器端应用程序平台::

适用于支持标准的HTML表单文件上传的任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)

Requirements

Mandatory requirements

jQuery v. 1.6+
jQuery UI widget factory v. 1.9+ (included): Required for the basic File Upload plugin, but very lightweight without any other dependencies from the jQuery UI suite.
jQuery Iframe Transport plugin (included): Required for browsers without XHR file upload support.

要求

强制要求

jQuery v. 1.6+
jQuery UI widget factory v. 1.9+ (included): 为基本的文件上传插件所需，轻量级，和jQuery UI suite 没有其他依赖。
jQuery Iframe Transport plugin (included): 浏览器不支持XHR文件上传的时候需要这个插件

Optional requirements

JavaScript Templates engine v. 2.5.4+: Used to render the selected and uploaded files for the Basic Plus UI and jQuery UI versions.
JavaScript Load Image library v. 1.13.0+: Required for the image previews and resizing functionality.
JavaScript Canvas to Blob polyfill v. 2.1.1+:Required for the image previews and resizing functionality.
blueimp Gallery v. 2.15.1+: Used to display the uploaded images in a lightbox.
Bootstrap v. 3.2.0+
Glyphicons

The user interface of all versions except thejQuery UI version is built with Bootstrap and icons from Glyphicons.

可选项

JavaScript Templates engine v. 2.5.4+: 用来渲染Basic Plus UI 和jQuery UI 版本选择和上传的文件
JavaScript Load Image library v. 1.13.0+: 用来预览和重新定义图片大小
JavaScript Canvas to Blob polyfill v. 2.1.1+:用来预览和重新定义图片大小
blueimp Gallery v. 2.15.1+: 用来显示上传图片
Bootstrap v. 3.2.0+
Glyphicons

所有版本的接口，特别是jQuery UI是采用bootstrap css定义的样式，图片来自Glyphicons。

Cross-domain requirements

Cross-domainFile Uploads using the IframeTransport plugin require a redirect back tothe origin server to retrieve the upload results. The exampleimplementation makes use of result.html as a static redirect page for the origin server.

The repository also includes the jQueryXDomainRequest Transport plugin, which enables limited cross-domain AJAXrequests in Microsoft Internet Explorer 8 and 9 (IE 10 supports cross-domainXHR requests).
The XDomainRequest object allows GET and POST requests only and doesn't supportfile uploads. It is used on the Demo to delete uploaded files from the cross-domain demofile upload service.

跨域提交需要：

跨域使用Iframe传输文件上传插件需要重定向回原始服务器检索上传结果。示例实现的时候把result.html作为源服务器的静态重定向页面。

仓库包含jQuery XDomainRequestTransport plugin，能够在IE8/9中实现有限的跨域ajax提交。IE10已经能够支持跨域的XHR请求。

XDomainRequest 对象仅支持GET和POST请求，而且不支持文件上传。在demo中使用是为了从跨域文件上传的服务器删除上传的文件。

Custom Backends

You can add support for various backends byadhering to the specification outlinedhere.

自定义后端

通过规范大纲。你可以为各种后端提供支持。

Browsers

Desktop browsers

The File Upload plugin is regularly tested with thelatest browser versions and supports the following minimal versions:

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

Mobile browsers

The File Upload plugin has been tested with andsupports the following mobile browsers:

Apple Safari on iOS 6.0+
Google Chrome on iOS 6.0+
Google Chrome on Android 4.0+
Default Browser on Android 2.3+
Opera Mobile 12.0+

Supported features

For a detailed overview of the features supportedby each browser version, please have a look at the Extendedbrowser support information.

Contributing

Bug fixes and new features can be proposed using pull requests.Please read the contributionguidelines before submitting a pullrequest.

Support

This project is actively maintained, but there isno official support channel.
If you have a question that another developer might help you with, please postto StackOverflow and tag your question with blueimp jquery file upload.

License

Released under the MIT license.

浏览器

桌面浏览器

此插件会定期测试浏览器兼容性，一下为支持此插件的最低版本