bootstrap file input 實現多圖上傳功能

來源:互聯網
上載者:User

標籤:event   限制   inf   min   lin   htm   lan   write   image   

官方文檔   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("Are you sure you want to delete this image?")) {
abort = false;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
}).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  即可見效果

bootstrap file input 實現多圖上傳功能

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.