jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。

支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。

产品特点

多文件上传：

允许选择多个文件一次，并将其上传同时进行。

• 拖放支持：
• 可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。
• 上传进度条：
• 显示一个进度条显示为单独的文件和所有上传组合上传进度。
• 可取消上传：
• 单个文件上传可以取消来停止上传进度。
• 可恢复上传：
• 中止的上传可以与浏览器支持的Blob API进行恢复。
• 分块上传：
• 大文件可以上传较小的块与浏览器支持的Blob的API 。
• 客户端图像大小调整：
• 图像可以自动调整大小的客户端与浏览器支持所需的JS API的。
• 预览图像，音频和视频：
• 图像，音频和视频文件的预览可以与浏览器支持所需的API上传前显示。
• 没有浏览器插件（例如使用Adobe的Flash ）要求：
• 该实现是基于开放的标准，如HTML5和JavaScript的，不需要额外的浏览器插件。
• 优美的后备旧版的浏览器：
• 如果支持的话，使用内置页框作为后备旧版浏览器通过的XMLHttpRequest上传文件。
• HTML文件上传表单回退：
• 通过使用标准的HTML文件上传表单的控件元素允许渐进增强。
• 跨站点的文件上传：
• 支持上传文件到不同的域与跨站点的XMLHttpRequest或iframe重定向。
• 多个插件实例：
• 允许使用在同一个网页上的多个插件实例。
• 可定制和可扩展的：
• 提供了一个API来设置各个选项，并定义回调方法的各种载事件。
• 多重和文件内容流上传：
• 文件可以被上传为标准的“多部分/窗体的数据”或文件内容流（ HTTP PUT文件上传） 。
• 兼容任何服务器端应用平台：
• 适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。

所有可触发的函数

$("#fileupload").fileupload({
        acceptFileTypes : /jp?g/i,
        maxFileSize : 3 * 1000 * 1000 * 1000
    }).bind('fileuploadadd', function(e, data) {
        console.log('fileuploadadd');
    }).bind('fileuploadsubmit', function(e, data) {
        console.log('fileuploadsubmit');
    }).bind('fileuploadsend', function(e, data) {
        console.log('fileuploadsend');
    }).bind('fileuploaddone', function(e, data) {
        console.log('fileuploaddone');
    }).bind('fileuploadfail', function(e, data) {
        console.log('fileuploadfail');
    }).bind('fileuploadalways', function(e, data) {
        console.log('fileuploadalways');
    }).bind('fileuploadprogress', function(e, data) {
        console.log('fileuploadprogress');
    }).bind('fileuploadprogressall', function(e, data) {
        console.log('fileuploadprogressall');
    }).bind('fileuploadstart', function(e) {
        console.log('fileuploadstart');
    }).bind('fileuploadstop', function(e) {
        console.log('fileuploadstop');
    }).bind('fileuploadchange', function(e, data) {
        console.log('fileuploadchange');
    }).bind('fileuploadpaste', function(e, data) {
        console.log('fileuploadpaste');
    }).bind('fileuploaddrop', function(e, data) {
        console.log('fileuploaddrop');
    }).bind('fileuploaddragover', function(e) {
        console.log('fileuploaddragover');
    }).bind('fileuploadchunksend', function(e, data) {
        console.log('fileuploadchunksend');
    }).bind('fileuploadchunkdone', function(e, data) {
        console.log('fileuploadchunkdone');
    }).bind('fileuploadchunkfail', function(e, data) {
        console.log('fileuploadchunkfail');
    }).bind('fileuploadchunkalways', function(e, data) {
        console.log('fileuploadchunkalways');
    }).bind('fileuploadprocessstart', function(e) {
        console.log('fileuploadprocessstart');
    }).bind('fileuploadprocess', function(e, data) {
        console.log('fileuploadprocess');
    }).bind('fileuploadprocessdone', function(e, data) {
        console.log('fileuploadprocessdone');
    }).bind('fileuploadprocessfail', function(e, data) {
        console.log('fileuploadprocessfail');
    }).bind('fileuploadprocessalways', function(e, data) {
        console.log('fileuploadprocessalways');
    }).bind('fileuploadprocessstop', function(e) {
        console.log('fileuploadprocessstop');
    }).bind('fileuploaddestroy', function(e, data) {
        console.log('fileuploaddestroy');
    }).bind('fileuploaddestroyed', function(e, data) {
        console.log('fileuploaddestroyed');
    }).bind('fileuploadadded', function(e, data) {
        console.log('fileuploadadded');
    }).bind('fileuploadsent', function(e, data) {
        console.log('fileuploadsent');
    }).bind('fileuploadcompleted', function(e, data) {
        console.log('fileuploadcompleted');
    }).bind('fileuploadfailed', function(e, data) {
        console.log('fileuploadfailed');
    }).bind('fileuploadfinished', function(e, data) {
        console.log('fileuploadfinished');
    }).bind('fileuploadstarted', function(e) {
        console.log('fileuploadstarted');
    }).bind('fileuploadstopped', function(e) {
        console.log('fileuploadstopped');
    });

相关笔记

• JQuery上传插件Uploadify使用详解