easyui-filebox java上传附件,在EasyUI项目中使用FileBox控件实现文件上传处理
我在較早之前的隨筆《基于MVC4+EasyUI的Web開發(fā)框架形成之旅--附件上傳組件uploadify的使用》Web框架介紹中介紹了基于Uploadify的文件上傳操作，免費(fèi)版本用的是Jquery+Flash實(shí)現(xiàn)文件的上傳處理，HTML5收費(fèi)版本的沒有試過。隨著Flash逐漸退出整個(gè)環(huán)境，很多瀏覽器都可能不再支持Flash的了，因此在更新原有EasyUI整個(gè)框架的時(shí)候，我們對(duì)框架全面進(jìn)行了完善，包括替換了這個(gè)Uploadify的文件上傳模塊，使用EasyUI內(nèi)置的FileBox控件，結(jié)合Jquery的Ajax操作，我們就可以實(shí)現(xiàn)了單文件或者多文件的上傳操作了。本篇隨筆就主要基于這個(gè)主題，介紹基于FileBox控件實(shí)現(xiàn)文件上傳處理，包括前端頁面代碼和后端的C#處理代碼的操作。
1、FileBox控件的使用
FileBox控件原理上是一個(gè)TextBox控件和隱藏的一個(gè)File控件，因此對(duì)于TextBox控件的變化時(shí)間onchange依舊可以使用，而由于其隱藏了File控件，那么需要根據(jù)DOM規(guī)則獲取其下面的File控件，從而可以獲得文件列表進(jìn)行Ajax的上傳操作，同時(shí)由于File文件是一個(gè)特殊的內(nèi)容，我們在上傳的時(shí)候，使用了JS的FormData對(duì)象容器來進(jìn)行承載文件信息和其他信息，從而能夠順利把文件及其他內(nèi)容信息一并通過AJax調(diào)用，上傳到后臺(tái)去處理。
按照官方的示例，其實(shí)就是定義一個(gè)HTML元素，并通過腳本方式初始化對(duì)應(yīng)的樣式和事件即可，如下所示。
//初始化腳本
$('#fb').filebox({
buttonText: '選擇文件',
buttonAlign: 'left'
})
這樣就可以了。
我們來看看我的實(shí)際案例，一般需要上傳附件的地方，包括導(dǎo)入Excel文件的記錄，或者上傳文件作為記錄的附件，前者一般是單文件的方式，一次導(dǎo)入一個(gè)Excel文件，并加載Excel進(jìn)行展示，如下所示。
image
文件控件的部分代碼如下所示
Excel導(dǎo)入操作
和前面Demo的定義類似，這里只是聲明了一個(gè)FileBox控件，主要還是通過JS代碼來進(jìn)行初始化，和相關(guān)的控制。
$(function () {
//添加對(duì)話框，上傳控件初始化
$('#file_upload').filebox({
buttonText: '選擇文件', //按鈕文本
buttonAlign: 'right', //按鈕對(duì)齊
//multiple: true, //是否多文件方式
//accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件類型
onChange: function (e) {
UploadFile(this, "file_upload", "AttachGUID", "div_files");//上傳處理
}
});
});
通過JS的控制，就可以較好的呈現(xiàn)文件上傳的控件了，比不用EasyUI的樣式好看很多。
image
通過onchange的控制，可以對(duì)文件操作及時(shí)進(jìn)行響應(yīng)，如我這里選擇文件后，馬上進(jìn)行上傳，并進(jìn)行數(shù)據(jù)的讀取和顯示在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參數(shù)，也可以用這個(gè)獲取文件
//var files = $(_obj).context.ownerDocument.activeElement.files;
//console.log(files);
var guid = $("#" + guid_ctrlname).val();
if (value && files[0]) {
//構(gòu)建一個(gè)FormData存儲(chǔ)復(fù)雜對(duì)象
var formData = new FormData();
formData.append("folder", '數(shù)據(jù)導(dǎo)入文件');
formData.append("guid", guid);
formData.append('Filedata', files[0]);//默認(rèn)的文件數(shù)據(jù)名為“Filedata”
$.ajax({
url: '/FileUpload/Upload', //單文件上傳
type: 'POST',
processData: false,
contentType: false,
data: formData,
success: function (json) {
//轉(zhuǎn)義JSON為對(duì)象
var data = $.parseJSON(json);
//提示用戶Excel格式是否正常，如果正常加載數(shù)據(jù)
ShowUpFiles(guid, div_files);
$.ajax({
url: '/BillDetail_Cust/CheckExcelColumns?guid=' + guid,
type: 'get',
dataType:'json',
success: function (data) {
if (data.Success) {
InitGrid(); //重新刷新表格數(shù)據(jù)
showTips("文件已上傳，數(shù)據(jù)加載完畢！");
}
else {
showTips("上傳的Excel文件檢查不通過。請(qǐng)根據(jù)頁面右上角的Excel模板格式進(jìn)行數(shù)據(jù)錄入。");
}
}
});
},
error: function (xhr, status, error) {
$.messager.alert("提示", "操作失敗"); //xhr.responseText
}
});
}
}
我們這里使用了FormData來存儲(chǔ)文件復(fù)雜對(duì)象。
var formData = new FormData();
通過查詢控件的子DOM對(duì)象，我們獲得File控件對(duì)象，并獲取控件里面的Files屬性。
var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;
文件上傳后，我們在文件框下面顯示已經(jīng)上傳的文件列表，如下代碼所示。
ShowUpFiles(guid, div_files);
文件上傳到服務(wù)器后，我們通過接口獲取對(duì)應(yīng)的Excel文件，并轉(zhuǎn)換為JSON列表返回，供頁面綁定數(shù)據(jù)展示。
InitGrid(); //重新刷新表格數(shù)據(jù)
上傳文件展示列表信息，整體界面效果如下所示。
image
單擊刪除，彈出確認(rèn)刪除對(duì)話框后移除文件即可。
image
上面通過限定，使用了一個(gè)文件，以及可以指定上傳文件的格式等，如果我們使用多文件上傳，客戶端只需要設(shè)置Multiple為True即可，后端也不需要調(diào)整接口 ，使用同一個(gè)接口進(jìn)行處理即可。
多文件的上傳場景，一般是某個(gè)記錄需要上傳文件的情況下，在錄入或者編輯界面提供文件上傳處理，如下所示。
image
我們這里可以選擇多個(gè)文件進(jìn)行一并上傳，初始化fileBox控件的時(shí)候，只需要指定multiple為true即可。
//添加對(duì)話框，上傳控件初始化
$('#file_upload').filebox({
buttonText: '選擇文件', //按鈕文本
buttonAlign: 'right', //按鈕對(duì)齊
multiple: true,
//accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件類型
onChange: function (e) {
UploadFile(this, "file_upload", "Attachment_GUID", "div_files");//上傳處理
}
});
文件的上傳和前面操作類似，只不過，我們這次添加了多個(gè)文件。
//構(gòu)建一個(gè)FormData存儲(chǔ)復(fù)雜對(duì)象
var formData = new FormData();
formData.append("folder", '政策法規(guī)');
formData.append("guid", guid);
for (var i = 0; i < files.length; i++) {
formData.append('Filedata', files[i]);//注意：默認(rèn)的文件數(shù)據(jù)名為“Filedata”
}
最后也是統(tǒng)一通過ajax進(jìn)行條用處理
$.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控件進(jìn)行處理的前端界面部分。
2、文件上傳的后端代碼處理
前面小節(jié)介紹了控件前端的使用，包括HTML代碼的定義和JS的初始化，以及使用AJax異步方式上傳文件并展示出來等操作。
文件的上傳成功，其實(shí)也是需要后端的接口處理，需要對(duì)文件進(jìn)行存儲(chǔ)，和數(shù)據(jù)庫信息的更新等操作。
前面我們通過AJax操作，在前端通過JS的方式傳輸FormData的內(nèi)容。
$.ajax({
url: '/FileUpload/Upload',
type: 'POST',
processData: false,
contentType: false,
data: formData,
success: function (json) {
//轉(zhuǎn)義JSON為對(duì)象
//var data = $.parseJSON(json);
ShowUpFiles(guid, div_files); //完成后更新已上傳的文件列表
showTips("上傳完畢！"); //提示完成
},
error: function (xhr, status, error) {
$.messager.alert("提示", "操作失敗"); //xhr.responseText
}
});
其中/FileUpload/Upload就是處理的路徑地址，我們來看看MVC里面的FileUploadController對(duì)應(yīng)方法Upload即可。
先來看看定義和主要處理文件的部分內(nèi)容。
image
我們通過HttpContext.Request.Files 獲得多個(gè)文件的集合，并進(jìn)行處理即可。
文件的處理，我們先讀取文件內(nèi)容到對(duì)象里面，然后使用了業(yè)務(wù)類進(jìn)行統(tǒng)一的存儲(chǔ)文件和數(shù)據(jù)庫信息即可。
image
文件上傳成功后，我們返回對(duì)應(yīng)的地址給前端使用(如果需要的話)，完整的上傳處理文件的后端代碼如下所示。
///
/// 多文件上傳處理
///
/// 附件組GUID
/// 指定的上傳目錄
///
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(string guid, string folder)
{
//如果需要修改字段顯示，則參考下面代碼處理
dynamic obj = new ExpandoObject();
List urls = new List();
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); //文件擴(kuò)展名
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.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://"))
{
//如果是相對(duì)目錄，加上當(dāng)前程序的目錄才能定位文件地址
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對(duì)象為空";
}
var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };
return ToJsonContent(newResult);
}
以上就是使用EasyUI的控件FileBox的前端處理和后端C#代碼，從而實(shí)現(xiàn)了文件的AJax處理操作，實(shí)現(xiàn)較好的體驗(yàn)和功能實(shí)現(xiàn)。
完整代碼都已全部貼出，方便供參考學(xué)習(xí)。
總結(jié)
以上是生活随笔為你收集整理的easyui-filebox java上传附件,在EasyUI项目中使用FileBox控件实现文件上传处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国网络视频前景 表面云淡风轻实在暗潮汹
- 下一篇： 神经网络参数优化算法,神经网络损失函数设