填坑!boostrap fileinput上传插件的批量上传成功事件的回调设置

在做上传模块时引用了boostrap fileinput插件,感觉功能很是强大。

$("#upload").fileinput({
        showUpload: false,
        language:'zh',
        uploadAsync:true,                        //异步上传 默认 true
        dropZoneEnabled:false,
        uploadUrl:'http://www.soyiyuan.com/',
        maxFileCount: 1,
        maxImageWidth: 600,
        resizeImage: false,
        showCaption: false,
        showPreview: false,
        browseClass: "btn btn-primary btn-lg",
        allowedFileExtensions : ['csv', 'txt'],
        previewFileIcon: ""
    }).on("filebatchselected", function(event, files) {   
            $(this).fileinput("upload");
        })
        .on("fileuploaded", function(event, data) {    //此处是上传成功回调函数
        if(data.response) {
            alert('处理成功');
        }
    });

fileinput的处理机制就是哪怕你后端是可以批量上传的,它在实际运行中还是将你批量上传的文件一个一个的发送到后端去处理,这里有个问题

.on("fileuploaded", function(event, data) {
	if(data.response) {
		alert('处理成功');
	}
}

当用此上传成功事件设置回调函数时,每完成一个文件,就运行一次回调函数,这就让人非常蛋疼了,尤其是回调函数设置了页面刷新的同志们,我同时上传20张图片,然后页面也跟着刷新20次吗?

有没有批量上传成功后,再统一出具的事件可以设置回调呢?在百度了一晚上之后,没看到啥可以直接告诉我怎么做的,终于在各路大神的代码中看到一点端倪。那就是

.on("filebatchuploadsuccess", function(event, data) {
	if(data.response) {
		alert('处理成功');
    }
}

有的地方说它是批量上传成功事件,有的地方说它是同步上传成功事件,说法不一,对我们自学成才党来说,能用就行了
但是很重要的一点就是,用此事件来设置批量上传回调函数时,fileinput必须设置为同步上传,即:

 uploadAsync:false,                        //如想要批量上传成功后再回调的话则必须设置为同步上传 false

不然批量上传成功事件回调不起作用的,有相同需求的可以去试试。

你可能感兴趣的:(jquery插件)