這篇文章將為大家詳細(xì)講解有關(guān)怎么在bootstrap中使用fileinput 上傳插件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
一、效果展示
1、原始的input type='file'
2、不做任何裝飾的bootstrap fileinput：（bootstrap fileinput初級進(jìn)化）
3、bootstrap fileinput高級進(jìn)化：中文化、可拖拽上傳、文件擴(kuò)展名校驗(yàn)（如果不是需要的文件，不讓上傳）
拖拽上傳
上傳中
4、bootstrap fileinput究極進(jìn)化：允許同時多線程上傳多個文件。
上傳中
上傳完成后
二、代碼示例
怎么樣？效果如何？不要急，我們一步一步來實(shí)現(xiàn)以上的效果。
1、cshtml頁面
首先引入需要的js和css文件。
重慶分公司
重慶分公司
//bootstrap fileinput
bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
"~/Content/bootstrap-fileinput/js/fileinput.min.js",
"~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
"~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")然后定義input type='file'標(biāo)簽
重點(diǎn)看這一句：
multiple表示允許同時上傳多個文件，class=“file-loading”表示標(biāo)簽的樣式。這里很重要，如果class="file"，則中文化不能生效。
2、js初始化
$(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ù)
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;
}; 說明：
（1）fileinput()方法里面?zhèn)魅氲氖且粋€json數(shù)據(jù)，它里面有很多屬性，每個屬性代表著初始化上傳控件的時候的特性，如果這些屬性都不設(shè)置，則表示使用默認(rèn)的設(shè)置。如果園友們想看看它里面有哪些屬性，可以打開fileinput.js的源碼，在它的最后如圖：
這些屬性如果不特意設(shè)置，就會使用默認(rèn)值。
（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}這個方法注冊上傳完成后的回調(diào)事件。也就是后天處理上傳的文件之后進(jìn)入這個方法里面處理。
3、后臺C#對應(yīng)的方法
還記得在js里面初始化控件方法fileinput()里面有一個參數(shù)url嗎，這個url對應(yīng)的值就指示C#后天對應(yīng)的處理方法。還是貼出后臺的處理方法。
[ActionName("ImportOrder")]
public object ImportOrder()
{
var oFile = HttpContext.Current.Request.Files["txt_file"];
var lstOrderImport = new List();
#region 0.數(shù)據(jù)準(zhǔn)備
var lstExistOrder = orderManager.Find();
var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();
var lstTmModel = modelManager.Find();
var lstTmMaterial = materialManager.Find();
//var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);
//iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value;
#endregion
#region 1.通過Stream得到Workbook對象
IWorkbook workbook = null;
if (oFile.FileName.EndsWith(".xls"))
{
workbook = new HSSFWorkbook(oFile.InputStream);
}
else if(oFile.FileName.EndsWith(".xlsx"))
{
workbook = new XSSFWorkbook(oFile.InputStream);
}
if (workbook == null)
{
return new { };
}
//...............處理excel的邏輯
//orderManager.Add(lstOrder);
lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList();
return new { lstOrderImport = lstOrderImport };
} 關(guān)于怎么在bootstrap中使用fileinput 上傳插件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
