我在較早之前的隨筆《基于MVC4+EasyUI的Web開發框架形成之旅--附件上傳組件uploadify的使用》Web框架介紹中介紹了基于Uploadify的檔案上傳操作，免費版本用的是Jquery+Flash實作檔案的上傳處理，HTML5收費版本的沒有試過，隨著Flash逐漸退出整個環境，很多瀏覽器都可能不再支持Flash的了，因此在更新原有EasyUI整個框架的時候，我們對框架全面進行了完善，包括替換了這個Uploadify的檔案上傳模塊，使用EasyUI內置的FileBox控制元件，結合Jquery的Ajax操作，我們就可以實作了單檔案或者多檔案的上傳操作了，本篇隨筆就主要基于這個主題，介紹基于FileBox控制元件實作檔案上傳處理，包括前端頁面代碼和后端的C#處理代碼的操作，
1、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 = https://www.cnblogs.com/alannever/p/$("#" + 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 = https://www.cnblogs.com/alannever/p/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 =https://www.cnblogs.com/alannever/p/ $.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 = https://www.cnblogs.com/alannever/p/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 = https://www.cnblogs.com/alannever/p/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控制元件進行處理的前端界面部分，
2、檔案上傳的后端代碼處理
前面小節介紹了控制元件前端的使用，包括HTML代碼的定義和JS的初始化，以及使用AJax異步方式上傳檔案并展示出來等操作，
檔案的上傳成功，其實也是需要后端的介面處理，需要對檔案進行存盤，和資料庫資訊的更新等操作，
前面我們通過AJax操作，在前端通過JS的方式傳輸FormData的內容，
$.ajax({ url: '/FileUpload/Upload', type: 'POST', processData: false, contentType: false, data: formData, success: function (json) { //轉義JSON為物件 //var data = https://www.cnblogs.com/alannever/p/$.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處理操作，實作較好的體驗和功能實作，
完整代碼都已全部貼出，方便供參考學習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/53312.html
標籤：其他
下一篇：自己寫了個截圖工具