JS文件上傳神器bootstrap fileinput詳解

Bootstrap FileInput插件功能如此強大，徹底沒有理由不去使用，可是國內不多能找到本插件完整的使用方法，因而本人去其官網翻譯了一下英文說明文檔放在這裏供英文很差的同窗勉強查閱。另外附上一段調用方發和servlet端的接收代碼，未完待續。

引言：

一個強化的HTML5 文件輸入插件，適用於Bootstrap 3.x。本插件對多種類型的文件提供文件預覽，而且提供了多選等功能。本插件還提供給你一個簡單的方式去安裝一個先進的文件選擇/上傳控制版本去配合Bootstrap CSS3樣式。經過對不少種文件提供預覽支持，好比圖片，文本，html，視頻，聲音，flash和對象，它大大加強了文件輸入的功能。另外，它還包含基於AJAX的上傳，拖拽，移除文件的功能，可視化的上傳進度條，和可選擇的添加或刪除文件預覽功能。

提示：本插件致力於使用大量在添加jquery下的css3和html5功能，強調：你可能會發現css3或html5或它兩個的混合在許多實現中被須要。

本插件最先受一篇博文和Jasny'sFile Input plugin啓發。可是本插件如今已經添加的好多功能和強化，爲開發者提供了一個成熟而且完整的文件管理工具和解決方案。

伴隨着4.0.0版本的發佈，本插件如今支持被多種現代化瀏覽器支持的，基於Ajax，利用html5 Formdata和XHR2協議的上傳。並且她也擁有了對在服務器端基於AJAX的文件刪除原生內置支持。所以它能夠添加更增強大的功能，聯機添加、移除文件。本插件也對大多數現代瀏覽器添加了拖拉，移除支持。它也已經爲Ajax上傳提供原生支持。萬一，瀏覽器不支持FormData或XHR2，本插件會降級成一個普通表單。

文件上傳插件File Input介紹

通常狀況下，咱們須要引入下面兩個文件，插件才能正常使用：

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

簡單的界面效果和衆多上傳文件控件同樣，能夠接受各類類型的文件。固然，咱們也能夠指定具體接受的文件類型等功能。

若是須要考慮中文化，那麼還須要引入文件：

bootstrap-fileinput/js/fileinput_locale_zh.js

這樣基於MVC的Bundles集合，咱們把它們所須要的文件加入到集合裏面便可。

?

1 2 3 4

//添加對bootstrap-fileinput控件的支持 css_metronic.Include( "~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css" ); js_metronic.Include( "~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js" ); js_metronic.Include( "~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js" );

這樣咱們在頁面裏面，就能夠呈現出中文的界面說明和提示了

文件上傳插件File Input的使用

通常狀況下，咱們能夠定義一個JS的通用函數，用來初始化這個插件控件的，以下JS的函數代碼所示。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//初始化fileinput控件（第一次初始化） function initFileInput(ctrlName, uploadUrl) {   var control = $( '#' + ctrlName);   control.fileinput({   language: 'zh' , //設置語言   uploadUrl: uploadUrl, //上傳的地址   allowedFileExtensions : [ 'jpg' , 'png' , 'gif' ], //接收的文件後綴   showUpload: false , //是否顯示上傳按鈕   showCaption: false , //是否顯示標題   browseClass: "btn btn-primary" , //按鈕樣式   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" ,   }); }

頁面代碼裏面，咱們放置一個文件上傳控件，以下代碼所示。

?

1 2 3

< div class = "row" style = "height: 500px" > < input id = "file-Portrait1" type = "file" > </ div >

這樣咱們腳本代碼的初始化代碼以下：

?

1 2	//初始化fileinput控件（第一次初始化） initFileInput( "file-Portrait" , "/User/EditPortrait" );

這樣就完成了控件的初始化了，若是咱們須要上傳文件，那麼還須要JS的代碼處理客戶端上傳的事件，同時也須要MVC後臺控制器處理文件的保存操做。

例如我對窗體數據的保存處理代碼以下所示。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//添加記錄的窗體處理   formValidate( "ffAdd" , function (form) {   $( "#add" ).modal( "hide" );   //構造參數發送給後臺   var postData = $( "#ffAdd" ).serializeArray();   $.post(url, postData, function (json) {   var data = $.parseJSON(json);   if (data.Success) {   //增長肖像的上傳處理   initPortrait(data.Data1); //使用寫入的ID進行更新   $( '#file-Portrait' ).fileinput( 'upload' );   //保存成功 1.關閉彈出層，2.刷新表格數據   showTips( "保存成功" );   Refresh();   }   else {   showError( "保存失敗:" + data.ErrorMessage, 3000);   }   }).error( function () {   showTips( "您未被受權使用該功能，請聯繫管理員進行處理。" );   });   });

其中咱們注意到文件保存的處理邏輯代碼部分：

?

1 2 3

//增長肖像的上傳處理 initPortrait(data.Data1); //使用寫入的ID進行更新 $( '#file-Portrait' ).fileinput( 'upload' );

第一行代碼就是從新構建上傳的附加內容，如用戶的ID信息等，這樣咱們就能夠根據這些ID來構建一些額外的數據給後臺上傳處理了。

這個函數主要就是從新給ID賦值，方便上傳的時候，獲取最新的附加參數，這個和Uploadify的處理模式同樣的。

?

1 2 3 4 5 6 7 8 9 10 11 12

//初始化圖像信息   function initPortrait(ctrlName, id) {   var control = $( '#' + ctrlName);   var imageurl = '/PictureAlbum/GetPortrait?id=' + id + '&r=' + Math.random();   //重要，須要更新控件的附加參數內容，以及圖片初始化顯示   control.fileinput( 'refresh' , {   uploadExtraData: { id: id },   initialPreview: [ //預覽圖片的設置   "<img src='" + imageurl + "' class='file-preview-image' alt='肖像圖片' title='肖像圖片'>" ,   ],   });   }

前面咱們看到，我上傳的地址爲："/User/EditPortrait"，這個後臺的函數我也公佈一下，但願給你們一個完整的案例代碼學習。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/// <summary>   /// 上傳用戶頭像圖片   /// </summary>   /// <param name="id">用戶的ID</param>   /// <returns></returns>   public ActionResult EditPortrait( int id)   {   CommonResult result = new CommonResult();   try   {   var files = Request.Files;   if (files != null && files.Count > 0)   {   UserInfo info = BLLFactory<User>.Instance.FindByID(id);   if (info != null )   {   var fileData = ReadFileBytes(files[0]);   result.Success = BLLFactory<User>.Instance.UpdatePersonImageBytes(UserImageType.我的肖像, id, fileData);   }   }   }   catch (Exception ex)   {   result.ErrorMessage = ex.Message;   }   return ToJsonContent(result);   }

這樣咱們就構建了上面的用戶肖像的保存處理邏輯了，文件能夠正常的保存到後臺的文件系統裏面，同時數據庫裏面記錄一些必備的信息。

固然，除了用來處理用戶的肖像圖片，咱們也能夠用來構建圖片相冊的處理操做的。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//初始化fileinput控件（第一次初始化）   $( '#file-Portrait' ).fileinput({   language: 'zh' , //設置語言   uploadUrl: "/FileUpload/Upload" , //上傳的地址   allowedFileExtensions : [ 'jpg' , 'png' , 'gif' ], //接收的文件後綴,   maxFileCount: 100,   enctype: 'multipart/form-data' ,   showUpload: true , //是否顯示上傳按鈕   showCaption: false , //是否顯示標題   browseClass: "btn btn-primary" , //按鈕樣式   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" ,   msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！" ,   });

源碼下載：Bootstrap FileInput文件上傳組件

本文已被整理到了《javascript文件上傳操做彙總》，《ajax上傳技術彙總》歡迎你們學習閱讀。

若是你們還想深刻學習，能夠點擊這裏進行學習，再爲你們附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程