• MVC项目使用easyui的filebox控件上传文件


    开发环境:WIN10+IE11,浏览器请使用IE10或以上版本

    开发技术框架MVC4+JQuery Easyui+knockoutjs

    效果为弹出小窗体,如下图

    1.前端cshtml文件代码(只包含文件上传窗体)。注意form设置,必须使用form-data传递文件。注意按钮事件我这里是封装的data-bind="click:closeImportClick",不要照抄

     html5可直接在input标签file控件中设置accept属性限制上传文件类型,设置multiple属性可同时上传多个文件

    <div class="easyui-window" id="import-excel-template" title="文件上传" style="400px;height:160px;padding:2px;" closed="true">
        <form id="importFileForm" method="post" enctype="multipart/form-data" style="display:none">
            <table style="margin:5px;height:70px;">
                <tr>
                    <td>请选择文件</td>
                    <td width="5px;"></td>
                    <td><input type="file" class="easyui-filebox" id="fileImport" name="fileImport" style="260px;"></td>
                    <td></td></tr>
                <tr>
                    <td colspan="4"><label id="fileName" /></td>
                </tr>
                <tr>
                    <td colspan="4">
                        <label id="uploadInfo" />
                    </td>
                </tr>
            </table><div style="text-align:center;clear:both;margin:5px;">
                <a id="uploadFile" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:importFileClick" href="javascript:void(0)">上传</a>
                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:closeImportClick" href="javascript:void(0)">关闭</a>
            </div>
        </form>
    </div>

    2.ViewModel中js代码:定义上传事件。注意使用ajax请求时,需要设置contentType: false,否则chrome和firefox不兼容

        //导入事件,显示导入弹出窗口
        this.importClick = function ()
        {
            $('#import-excel-template').window('open')
         document.getElementById("importFileForm").style.display = "block"; }
    //关闭导入弹出窗口 this.closeImportClick = function () { document.getElementById('fileImport').value = null; document.getElementById('fileName').innerHTML = ""; document.getElementById('uploadInfo').innerHTML = ""; $('#import-excel-template').window('close') } //导入文件 this.importFileClick = function () { //获取上传文件控件内容 var file = document.getElementById('fileImport').files[0]; //判断控件中是否存在文件内容,如果不存在,弹出提示信息,阻止进一步操作 if (file == null) { alert('错误,请选择文件'); return; } //获取文件名称 var fileName = file.name; //获取文件类型名称 var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length); //这里限定上传文件文件类型必须为.xlsx,如果文件类型不符,提示错误信息 if (file_typename == '.xlsx') { //计算文件大小 var fileSize = 0; //如果文件大小大于1024字节X1024字节,则显示文件大小单位为MB,否则为KB if (file.size > 1024 * 1024) {

              fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;

             if (fileSize > 10) {
                        alert('错误,文件超过10MB,禁止上传!'); return;
                    }
             fileSize = fileSize.toString() + 'MB'; }
    else { fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; } //将文件名和文件大小显示在前端label文本中 document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>"; //获取form数据 var formData = new FormData($("#importFileForm")[0]); //调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容 $.ajax({ url: "/api/Product/NewMaterialImport/PostExcelData", type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returnInfo) { //上传成功后将控件内容清空,并显示上传成功信息 document.getElementById('fileImport').value = null; document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>"; }, error: function (returnInfo) { //上传失败时显示上传失败信息 document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>"; } }); } else { alert("文件类型错误"); //将错误信息显示在前端label文本中 document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>" } }

    3.apicontroller代码

    /// <summary>
            /// 将文件上传到指定路径中保存
            /// </summary>
            /// <returns>上传文件结果信息</returns>
            [System.Web.Http.HttpPost]
            [ValidateInput(false)]
            public string PostExcelData()
            {
                string info = string.Empty;
                try
                {
                    //获取客户端上传的文件集合
                    HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                    //判断是否存在文件
                    if (files.Count > 0)
                    {
                        //获取文件集合中的第一个文件(每次只上传一个文件)
                        HttpPostedFile file = files[0];
                        //定义文件存放的目标路径
                        string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/FileUpLoad/Product");
                        //创建目标路径
                        ZFiles.CreateDirectory(targetDir);
                        //组合成文件的完整路径
                        string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
                        //保存上传的文件到指定路径中
                        file.SaveAs(path);
                        info = "上传成功";
                    }
                    else
                    {
                        info = "上传失败";
                    }
                }
                catch
                {
                    info= "上传失败";
                }
                return info;
            }
  • 相关阅读:
    神马搜索 面试小结
    我的第一篇paper
    【转载】技巧:Vim 的纵向编辑模式
    实习求职小结
    将博客园界面打造成Hexo经典主题Light
    试一下Markdown
    四色标记算法
    射雕三部曲的优美片段
    Docker
    Sublime Text 3 文档
  • 原文地址:https://www.cnblogs.com/mora1988/p/5546489.html
Copyright © 2020-2023  润新知