Fork me on GitHub

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.jsjQuery.fn 上挂载了名为 fileupload 的方法,所以你可以通过如下方式调用她。

1
2
3
4
5

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

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

选择文件后自动上传

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

1
2
3
4
5
6
7
8
9
10
11

$("#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

//文件上传初始化
$("#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
$('#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()
}
})

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

0%