bootstrap fileinput文件上傳插件功能如此強大，樣式非常美觀，并且支持上傳文件預覽，ajax同步或異步上傳，拖曳文件上傳等炫酷的功能，完全沒有理由不去使用，

JS引用：

HTML:

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: "",

uploadExtraData: { ID: "123" }

}).on('filebatchselected', function (event, data, id, index) {

$(this).fileinput("upload");

}).on("fileuploaded", function (event, data) {

if (data.response) {

//通過 data.response.Json對象屬性 獲得返回數(shù)據(jù)

errors = data.response.ErrorList;

}

})

}

//上傳JS初始化

$(function () {

initFileInput("fileUpload", "Controllers/Action");

});

//獲取上傳文件彈窗關閉動作

$("#fileUpload").change(function () { alert("上傳文件彈窗已關閉") })

參考資料：bootstrap上傳插件fileinput自動上傳&成功回調(diào)

bootstrap上傳插件fileinput功能非常強大,本文給出一例自動上傳&上傳成功回調(diào)的用例.核心就是調(diào)用 filebatchselected 文件選擇完成事件實現(xiàn)的,文件上傳成功的事件是 fileuploaded .

注意插件版本是 version 4.2.7 .

$("#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('處理成功');

}

});

如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程

Bootstrap實戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的python bootstrap-fileinput示例_bootstrapfileinput实现文件自动上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。