在EasyUI項目中使用FileBox控件實現文件上傳處理

我在較早以前的隨筆《基於MVC4+EasyUI的Web開發框架造成之旅--附件上傳組件uploadify的使用》Web框架介紹中介紹了基於Uploadify的文件上傳操做，免費版本用的是Jquery+Flash實現文件的上傳處理，HTML5收費版本的沒有試過。隨着Flash逐漸退出整個環境，不少瀏覽器均可能再也不支持Flash的了，所以在更新原有EasyUI整個框架的時候，咱們對框架全面進行了完善，包括替換了這個Uploadify的文件上傳模塊，使用EasyUI內置的FileBox控件，結合Jquery的Ajax操做，咱們就能夠實現了單文件或者多文件的上傳操做了。本篇隨筆就主要基於這個主題，介紹基於FileBox控件實現文件上傳處理，包括前端頁面代碼和後端的C#處理代碼的操做。

一、FileBox控件的使用

FileBox控件原理上是一個TextBox控件和隱藏的一個File控件，所以對於TextBox控件的變化時間onchange依舊可使用，而因爲其隱藏了File控件，那麼須要根據DOM規則獲取其下面的File控件，從而能夠得到文件列表進行Ajax的上傳操做，同時因爲File文件是一個特殊的內容，咱們在上傳的時候，使用了JS的FormData對象容器來進行承載文件信息和其餘信息，從而可以順利把文件及其餘內容信息一併經過AJax調用，上傳到後臺去處理。

按照官方的示例，其實就是定義一個HTML元素，並經過腳本方式初始化對應的樣式和事件便可，以下所示。

<input class="easyui-filebox" style="width:300px">

//初始化腳本
$('#fb').filebox({
    buttonText: '選擇文件',
    buttonAlign: 'left'
})

這樣就能夠了。

咱們來看看個人實際案例，通常須要上傳附件的地方，包括導入Excel文件的記錄，或者上傳文件做爲記錄的附件，前者通常是單文件的方式，一次導入一個Excel文件，並加載Excel進行展現，以下所示。

 

文件控件的部分代碼以下所示

        <div  id="tb" style="padding:5px;height:auto">
        <!-------------------------------搜索框----------------------------------->
            <fieldset>
                <legend>Excel導入操做</legend>
                <form id="ffSearch" method="post" enctype="multipart/form-data">
                    <div title="Excel導入操做" style="padding: 5px" data-options="iconCls:'icon-key'">
                        <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />
                        <br />
                        <input class="easyui-filebox" id="file_upload" style="width:300px" />
                    </div>
                </form>
                <div id="div_files"></div>
            </fieldset>
                
        <!-------------------------------詳細信息展現表格----------------------------------->
        <table id="grid" title="用戶操做" data-options="iconCls:'icon-view'">            
        </table>
    </div>

和前面Demo的定義相似，這裏只是聲明瞭一個FileBox控件，主要仍是經過JS代碼來進行初始化，和相關的控制。

    <script type="text/javascript">
        $(function () {
            //添加對話框，上傳控件初始化
            $('#file_upload').filebox({
                buttonText: '選擇文件',  //按鈕文本
                buttonAlign: 'right',   //按鈕對齊
                //multiple: true,       //是否多文件方式
                //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件類型
                onChange: function (e) {
                    UploadFile(this, "file_upload", "AttachGUID", "div_files");//上傳處理
                }
            });
        });
  </script>

經過JS的控制，就能夠較好的呈現文件上傳的控件了，比不用EasyUI的樣式好看不少。

 

 經過onchange的控制，能夠對文件操做及時進行響應，如我這裏選擇文件後，立刻進行上傳，並進行數據的讀取和顯示在Datagrid裏面。

文件上傳的JS邏輯代碼以下所示，所有貼出來供參考。

        //上傳文件操做
        function UploadFile(_obj, file_ctrlname, guid_ctrlname, div_files) {
            var value = $("#" + file_ctrlname).filebox('getValue');
            var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;
            //console.log(files);

            //傳入this參數，也能夠用這個獲取文件
            //var files = $(_obj).context.ownerDocument.activeElement.files;
            //console.log(files);
            
            var guid = $("#" + guid_ctrlname).val();
            if (value && files[0]) {
                //構建一個FormData存儲複雜對象
                var formData = new FormData();
                formData.append("folder", '數據導入文件');
                formData.append("guid", guid);
                formData.append('Filedata', files[0]);//默認的文件數據名爲「Filedata」

                $.ajax({
                    url: '/FileUpload/Upload', //單文件上傳
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (json) {                        
                        //轉義JSON爲對象
                        var data = $.parseJSON(json);

                        //提示用戶Excel格式是否正常，若是正常加載數據
                        ShowUpFiles(guid, div_files);

                        $.ajax({
                            url: '/BillDetail_Cust/CheckExcelColumns?guid=' + guid,
                            type: 'get',
                            dataType:'json',
                            success: function (data) {
                                if (data.Success) {                                
                                    InitGrid(); //從新刷新表格數據
                                    showTips("文件已上傳，數據加載完畢！");
                                }
                                else {
                                    showTips("上傳的Excel文件檢查不經過。請根據頁面右上角的Excel模板格式進行數據錄入。");
                                }
                            }
                        });          
                    },
                    error: function (xhr, status, error) {
                        $.messager.alert("提示", "操做失敗"); //xhr.responseText
                    }
                });
            }
        }

咱們這裏使用了FormData來存儲文件複雜對象。

var formData = new FormData();

經過查詢控件的子DOM對象，咱們得到File控件對象，並獲取控件裏面的Files屬性。

var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;

文件上傳後，咱們在文件框下面顯示已經上傳的文件列表，以下代碼所示。

ShowUpFiles(guid, div_files);

文件上傳到服務器後，咱們經過接口獲取對應的Excel文件，並轉換爲JSON列表返回，供頁面綁定數據展現。

InitGrid(); //從新刷新表格數據

上傳文件展現列表信息，總體界面效果以下所示。

 單擊刪除，彈出確認刪除對話框後移除文件便可。

 

上面經過限定，使用了一個文件，以及能夠指定上傳文件的格式等，若是咱們使用多文件上傳，客戶端只須要設置Multiple爲True便可，後端也不須要調整接口 ，使用同一個接口進行處理便可。

多文件的上傳場景，通常是某個記錄須要上傳文件的狀況下，在錄入或者編輯界面提供文件上傳處理，以下所示。

 

 咱們這裏能夠選擇多個文件進行一併上傳，初始化fileBox控件的時候，只須要指定multiple爲true便可。

            //添加對話框，上傳控件初始化
            $('#file_upload').filebox({
                buttonText: '選擇文件',  //按鈕文本
                buttonAlign: 'right',   //按鈕對齊
                multiple: true, //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件類型
                onChange: function (e) {
                    UploadFile(this, "file_upload", "Attachment_GUID", "div_files");//上傳處理
                }
            });

文件的上傳和前面操做相似，只不過，咱們此次添加了多個文件。

    //構建一個FormData存儲複雜對象
    var formData = new FormData();
    formData.append("folder", '政策法規');
    formData.append("guid", guid);
    for (var i = 0; i < files.length; i++) {
        formData.append('Filedata', files[i]);//注意：默認的文件數據名爲「Filedata」
    }

最後也是統一經過ajax進行條用處理

    $.ajax({
        url: '/FileUpload/Upload',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formData,
        success: function (json) {
            ShowUpFiles(guid, div_files);   //完成後更新已上傳的文件列表
            showTips("上傳完畢！");        //提示完成
        },
        error: function (xhr, status, error) {
            $.messager.alert("提示", "操做失敗"); //xhr.responseText
        }
    });

以上就是使用EasyUI的FileBox控件進行處理的前端界面部分。

 

二、文件上傳的後端代碼處理

前面小節介紹了控件前端的使用，包括HTML代碼的定義和JS的初始化，以及使用AJax異步方式上傳文件並展現出來等操做。

文件的上傳成功，其實也是須要後端的接口處理，須要對文件進行存儲，和數據庫信息的更新等操做。

前面咱們經過AJax操做，在前端經過JS的方式傳輸FormData的內容。

    $.ajax({
        url: '/FileUpload/Upload',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formData,
        success: function (json) {
            //轉義JSON爲對象
            //var data = $.parseJSON(json);

            ShowUpFiles(guid, div_files);   //完成後更新已上傳的文件列表
            showTips("上傳完畢！");        //提示完成
        },
        error: function (xhr, status, error) {
            $.messager.alert("提示", "操做失敗"); //xhr.responseText
        }
    });

其中/FileUpload/Upload就是處理的路徑地址，咱們來看看MVC裏面的FileUploadController對應方法Upload便可。

先來看看定義和主要處理文件的部份內容。

咱們經過HttpContext.Request.Files 得到多個文件的集合，並進行處理便可。

文件的處理，咱們先讀取文件內容到對象裏面，而後使用了業務類進行統一的存儲文件和數據庫信息便可。

 

 文件上傳成功後，咱們返回對應的地址給前端使用（若是須要的話），完整的上傳處理文件的後端代碼以下所示。

        /// <summary>
        /// 多文件上傳處理
        /// </summary>
        /// <param name="guid">附件組GUID</param>
        /// <param name="folder">指定的上傳目錄</param>
        /// <returns></returns>
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Upload(string guid, string folder)
        {
            //若是須要修改字段顯示，則參考下面代碼處理
            dynamic obj = new ExpandoObject();
            List<string> urls = new List<string>();
            var result = new CommonResult();
            HttpFileCollectionBase files = HttpContext.Request.Files;
            if (files != null)
            {
                int i = 0;
                foreach (string key in files.Keys)
                {
                    try
                    {
                        #region MyRegion
                        HttpPostedFileBase fileData = files[i++];
                        if (fileData != null)
                        {
                            HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
                            HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
                            HttpContext.Response.Charset = "UTF-8";

                            string fileName = Path.GetFileName(fileData.FileName);      //原始文件名稱
                            string fileExtension = Path.GetExtension(fileName);         //文件擴展名

                            FileUploadInfo info = new FileUploadInfo();
                            info.FileData = ReadFileBytes(fileData);
                            if (info.FileData != null)
                            {
                                info.FileSize = info.FileData.Length;
                            }
                            info.Category = folder;
                            info.FileName = fileName;
                            info.FileExtend = fileExtension;
                            info.AttachmentGUID = guid;

                            info.AddTime = DateTime.Now;
                            info.Editor = CurrentUser.Name;//登陸人
                            //info.Owner_ID = OwerId;//所屬主表記錄ID

                            result = BLLFactory<FileUpload>.Instance.Upload(info);
                            if (!result.Success)
                            {
                                LogTextHelper.Error("上傳文件失敗:" + result.ErrorMessage);
                            }
                            else
                            {
                                //返回具體路徑地址
                                string serverRealPath = info.BasePath.UriCombine(info.SavePath);
                                if (!Path.IsPathRooted(info.BasePath) &&
                                    !info.BasePath.StartsWith("http://") &&
                                    !info.BasePath.StartsWith("https://"))
                                {
                                    //若是是相對目錄，加上當前程序的目錄才能定位文件地址
                                    var url = HttpContext.Request.Url;
                                    var baseurl = url.AbsoluteUri.Replace(url.PathAndQuery, "");
                                    serverRealPath = baseurl.UriCombine(serverRealPath).Replace('\\', '/');
                                }
                                urls.Add(serverRealPath);
                            }
                        }
                        #endregion
                    }
                    catch (Exception ex)
                    {
                        result.ErrorMessage = ex.Message;
                        LogTextHelper.Error(ex);
                    }
                }
                obj.urls = urls;
            }
            else
            {
                result.ErrorMessage = "fileData對象爲空";
            }

            var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };
            return ToJsonContent(newResult);
        }

以上就是使用EasyUI的控件FileBox的前端處理和後端C#代碼，從而實現了文件的AJax處理操做，實現較好的體驗和功能實現。

完整代碼都已所有貼出，方便供參考學習。