基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap文件上傳插件File Input的使用

Bootstrap文件上傳插件File Input是一個不錯的文件上傳控件，可是搜索使用到的案例很少，使用的時候，也是一步一個腳印同樣摸着石頭過河，這個控件在界面呈現上，叫我以前使用過的Uploadify 好看一些，功能也強大些，本文主要基於我本身的框架代碼案例，介紹其中文件上傳插件File Input的使用。關於Uploadify的控件介紹，能夠參考我以前的隨筆介紹《基於MVC4+EasyUI的Web開發框架造成之旅--附件上傳組件uploadify的使用》。

一、文件上傳插件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}！",
            });

 

若是有興趣，能夠繼續參考系列文章：

基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及菜單模塊的處理

基於Metronic的Bootstrap開發框架經驗總結（2）--列表分頁處理和插件JSTree的使用

基於Metronic的Bootstrap開發框架經驗總結（3）--下拉列表Select2插件的使用

基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖標的提取和利用 

基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap文件上傳插件File Input的使用

基於Metronic的Bootstrap開發框架經驗總結（6）--對話框及提示框的處理和優化

基於Metronic的Bootstrap開發框架經驗總結（7）--數據的導入、導出及附件的查看處理

基於Metronic的Bootstrap開發框架經驗總結（8）--框架功能整體界面介紹

基於Metronic的Bootstrap開發框架經驗總結（9）--實現Web頁面內容的打印預覽和保存操做