基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

我在较早之前的随笔《基于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处理操作，实现较好的体验和功能实现。

完整代码都已全部贴出，方便供参考学习。