我在较早之前的随笔《基于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处理操作，实现较好的体验和功能实现。
完整代码都已全部贴出，方便供参考学习。
