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  便可見效果