bootstrap file input 实现多图上传功能

官方文档 http://plugins.krajee.com/

demo http://plugins.krajee.com/file-input-ajax-demo/3

github资源 https://github.com/kartik-v/bootstrap-fileinput

html

<link rel="stylesheet" href="../libs/bootstrap-fileinput-4.4.3/css/fileinput.min.css">

<script src="../libs/bootstrap-fileinput-4.4.3/js/fileinput.min.js"></script>
<script src="../libs/bootstrap-fileinput-4.4.3/js/locales/zh.js"></script>

<script>

$("#input-700").fileinput({
　　uploadUrl: rootPath+\' \', // server upload action
　　language:\'zh\',
　　minFileCount: 0,
　　uploadAsync: true,
　　maxFileCount: 10,
　　enctype: \'multipart/form-data\',
　　maxFileSize:5120,//限制上传大小KB
　　// overwriteInitial: false,//不覆盖已上传的图片
　　allowedPreviewTypes:[\'image\', \'html\', \'text\', \'video\', \'audio\', \'flash\',\'object\'],
　　// allowedFileExtensions: [\'jpg\', \'png\', \'gif\'],//可以可选择的违建格式
　　// elErrorContainer: \'#kv-error-1\',//错误显示的文本continner
　　showBrowse: true,
　　browseOnZoneClick: true,
　　ajaxSettings:{
　　　　contentType:false
　　}
}).on("filepredelete", function(jqXHR) {
　　var abort = true;
　　if (confirm("确定删除此图片?")) {
　　　　abort = false;
　　}
　　return abort; // 您还可以发送任何数据/对象，你可以接收` filecustomerror
}).on(\'filebatchpreupload\', function(event, data) {
　　var n = data.files.length, files = n > 1 ? n + \' files\' : \'one file\';
　　if (!window.confirm("确定上传选择的文件吗 ?")) {
　　　　return {
　　　　　　message: "上传失败!", // upload error message
　　　　　　data:{} // any other data to send that can be referred in `filecustomerror`
　　　　};
　　}
}).on(\'fileuploaded\', function(event, data, id, index) {//上传成功之后的处理
　　console.log(data)
　　inputFiles.push(data.response.data.id[0]);
　　var fname = data.files[index].name,
　　out = \'<li>\' + \'文件 # \' + (index + 1) + \' - \' + fname + \' 上传成功！\' + \'</li>\';
　　$(\'#kv-success-1 ul\').append(out);
　　$(\'#kv-success-1\').fadeIn(\'slow\');
}).on(\'filebatchpreupload\', function(event, data, id, index) {
　　$(\'#kv-success-1\').html(\'<h4>上传状态</h4><ul></ul>\').hide();
})

</script>

　　　　复制html js 引入css 、js 即可见效果