jquery-fileupload.js文件上传插件的使用

发表于 更新于 分类于 阅读次数：

基于 jquery 的文件上传插件。

仓库及文档

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

中文文档：http://www.jq22.com/jquery-info230

使用方式

引包

1
2
3
4
5
6
7
8
9
10
11
<!-- jquery-fileupload依赖于jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- jquery ui小部件，上传插件依赖了jquery ui的小部件 -->
<script src="js/vendor/jquery.ui.widget.js"></script>

<!-- 如果上传图片需要跨域，那么需要引入这个js文件，如果不跨域，则不需要引入 -->
<script src="js/jquery.iframe-transport.js"></script>

<!-- jquery上传插件 -->
<script src="js/jquery.fileupload.js"></script>

注：如果文件上传是跨域的，那么需要引入 jquery.iframe-transport.js 库。请按顺序引入。

html结构

name属性指定文件上传时该文件的键名，data-url 指定图片上传时的接口地址。data-url 属性可不指定在 file 域中，使用 fileupload({}) 方法的配置参数 url 也是可以的，且推荐使用本方式。

  • 单文件上传
1
<input id="fileupload" type="file" name="fileFiled" data-url="server/php/">
  • 多文件上传
1
2
<!-- 加 multiple 属性，指定多文件上传 -->
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

注： 当没有为 <input type="file" name="" /> 文件域指定 name 属性时，在上传时，该插件会将 name 属性值默认设置为 “files[]” 所以，当后端无法获取到上传的文件时，请检查 name 属性是否设置正确。

fileupload 函数

使用方式也很简单，jquery-fileupload.js 在 jQuery.fn 上挂载了名为 fileupload 的方法，所以你可以通过如下方式调用她。

1
2
3
4
5
6

$("file-selector").fileupload( options );

// file-selector  文件域选择器
// options   文件上传配置对象

选择文件后自动上传

默认的，选择文件后会自动上传。

1
2
3
4
5
6
7
8
9
10
11
12

$("#fileupload").fileupload({
  url: '文件上传请求地址',
  dataType: 'json',
  done: function (e , data){

    // 文件上传成功后触发回调
    //

  }
})

手动上传

向 fileupload 方法中传递 add 函数，可以做到手动触发上传。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//文件上传初始化
$("#fileupload").fileupload({

      url : "上传文件的请求地址"    //同样也可以在input元素里使用data-url属性来指定请求地址
      dataType:"json",            //预期服务器返回的数据类型
      done:function (e, data) {   //图片上传成功后的回调函数，处理上传成功后的动作

        console.log(data);
  
        //done回调函数参数注释：
        //data : 图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        //e : 事件对象
        
      },
      add : function(e,data){     //文件上传前触发回调
  
  		// 逻辑处理 ...

  		//给某个按钮绑定点击事件，点击后开始上传
  		$(".somebtn").on("click" , function(e){
          data.submit();
  		});
  
  		//data.submit();  //条件满足后手动触发上传
        
      }
    });


注意：如果添加加了 add() 回调函数，必须要调用 data.submit() 方法才会触发文件上传，否则不会执行上传动作。

附加参数的添加

如果需要一次传递除文件外的其他参数，可以在文件上传前添加。这里有两种方式，第一种是在 fileupload 的自定义事件 fileuploadsubmit 中添加。第二种则是在 add() 函数中处理添加。

  • 文件上传前事件 fileuploadsubmit
1
2
3
4
5
6
7
8
9
10
11
12
$('#fileupload').bind('fileuploadsubmit', function (e, data) {

  data.formData = { 

    // 如果需要额外添加参数可以在这里添加
    // UserID 只是演示，传递什么参，怎么获取，由你自己决定
    UserID: '666'

  };  

 });

  • 在 add() 函数中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#fileupload").fileupload({

  // ...
  // 忽略其他配置

  add: function (e, data){

    data.formData = {

      // 在这里添加附件参数
      customKey: "customKey's value",

      // other params ...
    }

    // 不要忘记调用 data.submit() 方法。
    data.submit()
  }
})

注：更多配置参数及用法，请查看该插件文档。