bootstrap fileinput文件上傳插件功能如此強大，樣式非常美觀，并且支持上傳文件預覽，ajax同步或異步上傳，拖曳文件上傳等炫酷的功能，完全沒有理由不去使用，
JS引用：
<script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script><link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" /><script src="~/Scripts/lib/jquery.json.js"></script>
HTML:
<input id="fileUpload" type="file" >
JS:
//自動上傳文件-JS function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設置語言 uploadUrl: uploadUrl, //上傳的地址 (該方法需返回JSON字符串) allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后綴 showUpload: false, //是否顯示上傳按鈕 showCaption: true,//是否顯示標題 browseClass: "btn btn-primary", //按鈕樣式 //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", uploadExtraData: { ID: "123" } }).on('filebatchselected', function (event, data, id, index) { $(this).fileinput("upload"); }).on("fileuploaded", function (event, data) { if (data.response) { //通過 data.response.Json對象屬性 獲得返回數據 errors = data.response.ErrorList; } }) }//上傳JS初始化 $(function () { initFileInput("fileUpload", "Controllers/Action"); });//獲取上傳文件彈窗關閉動作$("#fileUpload").change(function () { alert("上傳文件彈窗已關閉") })參考資料：bootstrap上傳插件fileinput自動上傳&成功回調
bootstrap上傳插件fileinput功能非常強大,本文給出一例自動上傳&上傳成功回調的用例.核心就是調用 filebatchselected 文件選擇完成事件實現的,文件上傳成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
<script> $("#update_csv").fileinput({ showUpload: false, language:'zh', uploadAsync:true, dropZoneEnabled:false, uploadUrl:'http://www.soyiyuan.com/', maxFileCount: 1, maxImageWidth: 600, resizeImage: false, showCaption: false, showPreview: false, browseClass: "btn btn-primary btn-lg", allowedFileExtensions : ['csv', 'txt'], previewFileIcon: "" }).on("filebatchselected", function(event, files) { $(this).fileinput("upload"); }) .on("fileuploaded", function(event, data) { if(data.response) { alert('處理成功'); } });</script>如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程Bootstrap實戰教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
