在EasyUI專案中使用FileBox控制元件實現檔案上傳處理
我在較早之前的隨筆《基於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 = $("#" + 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控制元件進行處理的前端介面部分。
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 = $.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處理操作，實現較好的體驗和功能實現。
完整程式碼都已全部貼出，方便供參考學習。