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
<input id=”input-700″ name=”kartik-input-700[]” type=”file” multiple class=”file-loading”> <!– 必须的 –>
<div id=”kv-error-1″ style=”margin-top:10px;display:none”></div>
<div id=”kv-success-1″ class=”alert alert-success fade in” style=”margin-top:10px;display:none”></div>
js
<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 即可见效果