本篇介紹如何使用bootstrap fileinput.js，file input插件功能如此強(qiáng)大，樣式非常美觀，并且支持上傳文件預(yù)覽，ajax同步或異步上傳，拖曳文件上傳等炫酷的功能，最好用的文件上傳組件。

文件夾結(jié)構(gòu)

版本都是3.x

New Document

x

×

請(qǐng)選擇Excel文件

下載導(dǎo)入模板

$(function () {

//0.初始化fileinput

var oFileInput = new FileInput();

oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");

});

//初始化fileinput

var FileInput = function () {

var oFile = new Object();

//初始化fileinput控件(第一次初始化)

oFile.Init = function(ctrlName, uploadUrl) {

var control = $('#' + ctrlName);

//初始化上傳控件的樣式

control.fileinput({

language: 'zh', //設(shè)置語言

uploadUrl: uploadUrl, //上傳的地址

allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后綴

showUpload: true, //是否顯示上傳按鈕

showCaption: false,//是否顯示標(biāo)題

browseClass: "btn btn-primary", //按鈕樣式

//dropZoneEnabled: false,//是否顯示拖拽區(qū)域

//minImageWidth: 50, //圖片的最小寬度

//minImageHeight: 50,//圖片的最小高度

//maxImageWidth: 1000,//圖片的最大寬度

//maxImageHeight: 1000,//圖片的最大高度

//maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小

//minFileCount: 0,

maxFileCount: 10, //表示允許同時(shí)上傳的最大文件個(gè)數(shù)

enctype: 'multipart/form-data',

validateInitialCount:true,

previewFileIcon: "",

msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",

});

//導(dǎo)入文件上傳完成之后的事件

$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {

$("#myModal").modal("hide");

var data = data.response.lstOrderImport;

if (data == undefined) {

toastr.error('文件格式類型不正確');

return;

}

//1.初始化表格

var oTable = new TableInit();

oTable.Init(data);

$("#div_startimport").show();

});

}

return oFile;

};

知識(shí)只有共享才能傳播，才能推崇出新的知識(shí)，才能學(xué)到更多，這里寫的每一篇文字/博客，基本都是從網(wǎng)上查詢了一下資料然后記錄下來，也有些是原滋原味搬了過來，也有時(shí)加了一些自己的想法，希望大家喜歡。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的python bootstrap-fileinput示例_bootstrap fileinput完整实例分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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