推荐支持多文件上传的jQuery插件jQuery File Upload

如果只是想基本使用，不考虑样式的问题，则添加如下引用即可

<link href="./path/to/jquery.fileupload.css" rel="stylesheet" />  
<link href="./path/to//jquery.fileupload-ui.css" rel="stylesheet" />  
<script src="./path/to/jquey-1.8.3.min.js"></script>  
<script src="./path/to/jquery.ui.widget.js"></script>  
<script src="./path/to/jquery.iframe-transport.js"></script>  
<script src="./path/to/jquery.fileupload.js"></script>

然后添加一个input

<input id="fileupload" type="file" name="files[]" multiple/>

JS代码,选择文件之后即可上传，不需要上传按钮

$(function () {  
    $('#fileupload').fileupload({  
        url: "/upload",  
        done: function (e, data) {  
            var json = $.parseJSON(data.result);  
            console.log(json[0].delete_url);                      
       }  
    });  
}) ;

显示上传进度条：

JS脚本

$('#fileupload').fileupload({
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css('width',progress + '%');
    }
});

进度条的显示需要一个<div>容器包裹：

<div id="progress">
　<div class="bar" style="width: 0%;"></div>
</div>

API

一、Initialization：

在上传按钮上调用fileupload()方法，示例：

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

二、 Options :

• url：请求发送的目标url
  Type: string
  Example: ‘/path/to/upload/handler.json’

• Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者”PATCH”,默认”POST”
  Type: string
  Example: ‘PUT’

• dataType:希望从服务器返回的数据类型，默认”json”
  Type: string
  Example: ‘json’

• autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。
  Type: boolean
  Default: true

• acceptFileTypes：允许上传的的文件类型
  Example: /(.|\/)(gif|jpe?g|png|xlsx)$/i

• maxFileSize: 最大上传文件大小
  Example: 999000 (999KB) //单位：B

• minFileSize:最小上传文件大小
  Example: 100000 (100KB) //单位：B

• previewMaxWidth : 图片预览区域最大宽度
  Example: 100 //单位：px

三、 Callback Options:
使用方法一：函数属性
实例：

$('#fileupload').fileupload({
    drop: function (e, data) {
        $.each(data.files, function (index, file) {
            alert('Dropped file: ' + file.name);
        });
    },
    change: function (e, data) {
        $.each(data.files, function (index, file) {
            alert('Selected file: ' + file.name);
        });
    }
});

使用方法二：绑定事件监听函数
实例：

$('#fileupload')
　　　　.bind('fileuploaddrop', function (e, data) {/* ... */})
　　　　.bind('fileuploadchange', function (e, data) {/* ... */});

每个事件名称都添加前缀：”fileupload”;
注意推荐使用第二种方法。

常用的回调函数：

1. add: 当文件被添加到上传组件时被触发

   $('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
   或者
   $('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
   

2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发
3. progressall: 全局上传处理事件的回调函数

   Example:
   $('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width',progress + '%');
   });
   

4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。

5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。

6. always : 上传请求结束时（成功，错误或者中止）都会被触发。