Bootstrap文件上傳插件File Input的使用

一、文件上傳插件File Input介紹

這個插件主頁地址是：http://plugins.krajee.com/file-input，能夠從這裏看到不少Demo的代碼展現：http://plugins.krajee.com/file-basic-usage-demo。

這是一個加強的 HTML5 文件輸入控件，是一個 Bootstrap 3.x 的擴展，實現文件上傳預覽，多文件上傳等功能。

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

bootstrap-fileinput/css/fileinput.min.css

bootstrap-fileinput/js/fileinput.min.js

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

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

bootstrap-fileinput/js/fileinput_locale_zh.js

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

            //添加對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的函數代碼所示。

//初始化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>", }); }

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

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

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

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

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

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

            //添加記錄的窗體處理 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("您未被受權使用該功能，請聯繫管理員進行處理。"); }); });

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

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

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

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

        //初始化圖像信息 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"，這個後臺的函數我也公佈一下，但願給你們一個完整的案例代碼學習。

        /// <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); }

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

固然，除了用來處理用戶的肖像圖片，咱們也能夠用來構建圖片相冊的處理操做的，具體界面以下所示。

這部分的初始化代碼以下所示：

            //初始化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}！", });