Bootstrap Fileinput檔案上傳元件用法詳解_javascript技巧

最近時間空餘，總結了一些關於bootstrap fileinput組件的一些常見用法，特此分享到腳本之家平台，供大家參考，同時也方便以後的查找。本文寫的不好還請見諒。

一、效果展示

1.原始的input type='file'，簡直不忍直視。

2、不做任何裝飾的bootstrap fileinput：（bootstrap fileinput初級進化）

3、bootstrap fileinput進階進化：中文化、可拖曳上傳、檔案副檔名校驗（如果不是需要的文件，不讓上傳）

拖曳上傳

上傳中

4、bootstrap fileinput究極進化：允許同時多執行緒上傳多個檔案。

上傳中

上傳完成後

二、程式碼範例

怎麼樣？效果如何？不要著急，我們一步一步來實現以上的效果。

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'標籤

<form>
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>
<h4 id="请选择excel文件">请选择excel文件</h4>
</div>
<div class="modal-body">
<a href="~/data/exceltemplate/order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</div></div>
</div>
</div>
</form>

重點看這一句：

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />

multiple表示允許同時上傳多個文件，class=「file-loading」表示標籤的樣式。

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', //设置语言
uploadurl: uploadurl, //上传的地址
allowedfileextensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showupload: true, //是否显示上传按钮
showcaption: false,//是否显示标题
browseclass: "btn btn-primary", //按钮样式 
//dropzoneenabled: false,//是否显示拖拽区域
//minimagewidth: 50, //图片的最小宽度
//minimageheight: 50,//图片的最小高度
//maximagewidth: 1000,//图片的最大宽度
//maximageheight: 1000,//图片的最大高度
//maxfilesize: 0,//单位为kb，如果为0表示不限制文件大小
//minfilecount: 0,
maxfilecount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateinitialcount:true,
previewfileicon: "<i class='glyphicon glyphicon-king'></i>",
msgfilestoomany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
});
//导入文件上传完成之后的事件
$("#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()方法裡面傳入的是一個json數據，它裡面有很多屬性，每個屬性代表著初始化上傳控制項的時候的特性，如果這些屬性都不設置，則表示使用預設的設定.如果園友們想看看它裡面有哪些屬性，可以開啟fileinput.js的來源碼，在它的最後如圖：

這些屬性如果不刻意設置，就會使用預設值。

（2）$("#txt_file").on("fileuploaded", function (event, data, previewid, index) {}這個方法註冊上傳完成後的回呼事件。也就是後天處理上傳的檔案之後進入這個方法裡面處理。

3、後台c#對應的方法

還記得在js裡面初始化控制項方法fileinput()裡面有一個參數url嗎，這個url對應的值就指示c#後天對應的處理方法。還是貼出後台的處理方法。

[ActionName("ImportOrder")]
public object ImportOrder()
{
var oFile = HttpContext.Current.Request.Files["txt_file"];
var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();
#region 0.数据准备
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 };
}

由於部落客的專案是上傳excel，所以這裡用是用的npoi的邏輯，如果是上傳圖片等文件，可以使用gdi去處理圖片。

4、同時上傳多個檔案

同時上傳多個檔案的時候，前台會發送多個非同步的請求到後台，也就是說，當同時上傳三個檔案的時候，後台的importorder方法會進入三次。這樣就能使用多執行緒同時去處理三個檔案。

三、總結

關於bootstrap fileinput的基礎使用大概就介紹完了，其實就是一個上傳的元件，也不存在什麼高階用法。重點是把介面做得更友好，更好的增加使用者體驗。

關於bootstrap fileinput檔案上傳元件用法詳解就給大家介紹這麼多，希望對大家有幫助！