jQuery-File-Upload 文件上传插件的使用

基本的使用官网上都有，这里就简单介绍写：

<input id="fileupload" type="file" name="files[]" data-url="rest/controller/upload" multiple>

 data-url 属性填入的文件上传的地址，multiple 代表的是可以多文件上传，如果去掉 multiple ，在选择文件的时候只能选择一个。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url:'/upload',
        add:function(e, data) {
              //选定上传文件的时候出发
        },
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                 //做一些操作，比如动态添加元素
               
            }); 
        },
 
//这里是进度条
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
});

当然你也可以想ajax那样去设置上传的url。

一次请求上传多个文件

在选择多文件上传的时候，jQuery-File-Upload 会默认将选中的多个文件一个一个的发送到服务器去上传，而不是一次请求将多个文件一起上传到服务器，这是我们需要去设定一个参数：singleFileUploads：false.不然选择10个文件上传，后台将会收到10次请求

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url:'/upload',
        singleFileUploads:false,//多文件上传开启，否则会每个文件发一次请求
        ........
    });
});

上传文件设置参数

很多时候，我们需要去在上传的时候设置不同的参数。这个时候就要使用formData 属性，formData 的赋值，有两种方式，一种是{name:name} 键值对方式，另一种是使用serializeArray()方法。像这样子去提前设定：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url:'/upload',
        singleFileUploads:false,//多文件上传开启，否则会每个文件发一次请求
        formData:{name:'123',id:'8888'},//设置上传参数
        ........
    });
});

你也可以动态，根据用户的实际情况来设定，像这样子：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url:'/upload',
        singleFileUploads:false,//多文件上传开启，否则会每个文件发一次请求
        add:function(e, data) {
				 var name=$("#name").val();
				 var dirType=$("#dirType").val();;
				 var id=$("#id").val();
				 //文件上传附带参数
				 data.formData={name:name,id:id};
				 //提交
				 data.submit();
			},
        ........
    });
});

你也可以给每个文件都设置不同的上传参数，像这样子：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url:'/upload',
        singleFileUploads:false,//多文件上传开启，否则会每个文件发一次请求
        add:function(e, data) {
			 $.each(data.files, function(index, file) {
					//获取上传参数
					file.formData=getFormValue();
				});
				 //提交
				 data.submit();
			},
        ........
    });
});
function getFormValue(){
	var fields;
	fields=$(".imgParam").serializeArray();
	return fields;
}

当然，每一个file.formData 你可以自己去设置不同的。

 

完。

转载于:https://my.oschina.net/zy223344/blog/859634