我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操纵，免费版本用的是Jquery+Flash实现文件的上传措置惩罚惩罚，HTML5收费版本的没有试过。跟着Flash逐渐退出整个环境，很多浏览器都可能不再撑持Flash的了，因此在更新原有EasyUI整个框架的时候，我们对框架全面进行了完善，包孕替换了这个Uploadify的文件上传模块，使用EasyUI内置的FileBox控件，结合Jquery的Ajax操纵，我们就可以实现了单文件或者多文件的上传操纵了。本篇随笔就主要基于这个主题，介绍基于FileBox控件实现文件上传措置惩罚惩罚，包孕前端页面代码和后真个C#措置惩罚惩罚代码的操纵。

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逻辑代码如下所示，全部贴出来供参考。