jQueryFileUpload

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 is999 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 after5 minutes or less(demo files are stored in memory). You candrag & dropfiles from your desktop on this webpage (seeBrowser support). Please refer to theproject websiteanddocumentationfor more information. Built with theBootstrapCSS framework and Icons fromGlyphicons.

Demo中的注意事项

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

主题

Basic Plus UI

源码

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

ReadeMe

Setup

How to setup the plugin on your website How to use only the basic plugin (minimal setup guide).

设置

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

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

jQueryv. 1.6+ jQuery UI widget factoryv. 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 forbrowsers without XHR file upload support.

要求

强制要求

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

Optional requirements

JavaScript Templates enginev. 2.5.4+: Used to render the selected and uploaded files for the Basic Plus UI and jQuery UI versions. JavaScript Load Image libraryv. 1.13.0+: Required for the image previews and resizing functionality. JavaScript Canvas to Blob polyfillv. 2.1.1+:Required for the image previews and resizing functionality. blueimp Galleryv. 2.15.1+: Used to display the uploaded images in a lightbox. Bootstrapv. 3.2.0+ Glyphicons

The user interface of all versions except thejQuery UI version is built withBootstrapand icons fromGlyphicons.

可选项

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

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

Cross-domain requirements

Cross-domainFile Uploadsusing theIframeTransport pluginrequire a redirect back tothe origin server to retrieve the upload results. Theexampleimplementationmakes use ofresult.htmlas a static redirect page for the origin server.

The repository also includes thejQueryXDomainRequest 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 theDemoto 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 specificationoutlinedhere.

自定义后端

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

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 theExtendedbrowser support information.

Contributing

Bug fixesandnew featurescan be proposed usingpull requests.Please read thecontributionguidelinesbefore 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 posttoStackOverflowand tag your question withblueimp jquery file upload.

License

Released under theMIT license.

浏览器

桌面浏览器

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

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

手机浏览器

以下浏览器已经通过支持性测试:

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+

支持的功能

对于每个浏览器支持的详情可以浏览额外的浏览器支持信息

贡献

Bug fixesandnew featurescan be proposed usingpull requests.Please read thecontributionguidelinesbefore submitting a pullrequest.

Bug修复和新功能特性可以通过pull request进行提议，请在提交之前阅读贡献指导文档

支持

This project is actively maintained, but there isno official support channel.

If you have a question that another developer might help you with, please posttoStackOverflowand tag your question withblueimp jquery file upload.

这个项目正在积极维护,但是没有官方的支持渠道。

如果有问题，可以在stackoverflow上进行提交并打上blueimp jquery file upload标签