Bootstrap File Input是一款基于bootstrap框架的html5上传文件插件，具体展示效果如下：
使用时常见配置如下：
代码语言：javascript复制 $(".multipleFileUpload").fileinput({undefined
language: 'zh',
uploadClass: "btn btn-sm handle-btn",
removeClass: "btn btn-sm handle-btn",
browseClass: "btn btn-sm handle-btn",
cancelClass :"btn btn-sm handle-btn",
allowedPreviewTypes: ['image','html','text','video','audio','flash','object'],
showUpload:true,
showZoom:false,
contentType:'multipart/form-data; charset=UTF-8',
uploadUrl: 上传文件url,
maxFilePreviewSize: 10240,
overwriteInitial: false,
previewZoomSettings:{undefined
image: {width: "auto", height: "100%"},
object: {width: "auto", height: "48px"}
},
previewSettings:{undefined
image: {width: "80px", height: "80px"},
other: {width: "80px", height: "80px"}
},
slugCallback: function (filename) {undefined
return encodeURI(filename);
}
});
$(".multipleFileUpload").on("fileuploaded", function (event, data, previewId, index) {undefined
debugge
if(data.response.success){undefined
$('.multipleFileUpload').fileinput('clear').fileinput('enable');
console.log("上传成功");
}else{undefined
console.log("上传失败");
}
});在实际使用中出现的问题是：上传完文件后再打开上传文件界面显示取消按钮，解决方法如下：
代码语言：javascript复制 $('.multipleFileUpload').fileinput('clear').fileinput('refresh').fileinput('enable');参考资料：http://plugins.krajee.com/file-input/plugin-methods#refresh
