zoukankan      html  css  js  c++  java
  • Easyui上传文件的问题

    首先,添加以下代码到前端界面

    <form id="fm" method="post" enctype="multipart/form-data" style="margin:0;padding:20px 50px">
        <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">上传文件</div>
        <div style="margin-bottom:10px">
            <input id='upfile' class="easyui-filebox" name="file1" multiple="true" data-options="prompt:'选择文件',buttonText:'选择文件'" style="300px"/>
            <a id="sub" href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="submit()" plain="true">上传文件</a>
        </div>
    </form>

    需要注意的地方:easyui-filebox必须要加上name属性,不加后台就没法获取。

    千万不要纠结于使用 $('#upfile').filebox('getValue') 获取文件路径反馈为 C:fakepath... 的问题,这个跟上传文件真的没有一点关系。

    写入对应的JS代码

      function submit() {
                $('#fm').form('submit', {
                    url: '/UploadDemo/UploadFiles',
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        var result = eval('(' + result + ')');
                        if (result.success) {
                            $.messager.show({   
                                title: '提示',
                                msg: '上传成功'
                            });
                        } else {
                            $.messager.show({    
                                title: '错误',
                                msg: result.errorMsg
                            });
                        }
                    }
                });
            }

    控制器写入上传文件代码

     [HttpPost]
            public ActionResult UploadFiles()
            {
                var success = false;
                var errorMsg = "";
    
                //获取客户端上传的文件集合
                HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                if (files.Count == 0)
                {
                    errorMsg = "未获取到任何文件";
                    return Json(new { success = success, errorMsg = errorMsg });
                }
                try
                {
                    //定义文件存放的目标路径
                    string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/Content/Upload/touxiang");
                    //获取文件集合中的每一个文件
                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFile file = files[i];
                        //组合成文件的完整路径
                        string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
                        //保存上传的文件到指定路径中
                        file.SaveAs(path);
                    }
                    success = true;
                }
                catch (System.Exception ex)
                {
                    errorMsg = ex.ToString();
                    return Json(new { success = success, errorMsg = errorMsg });
                }
                return Json(new { success = success, errorMsg = errorMsg });
            }

    搞定~

    附:如果要限制上传文件类型,直接在data-option中设置accept属性即可,如

    <input class="easyui-filebox" data-options="accept: 'image/*'"/>

    image/*中*为通配符,对应清单如下

    类型 accept对应值 描述
    *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
    *.ac3 audio/ac3 AC3 Audio
    *.asf allpication/vnd.ms-asf Advanced Streaming Format
    *.au audio/basic AU Audio
    *.css text/css Cascading Style Sheets
    *.csv text/csv Comma Separated Values
    *.doc application/msword MS Word Document
    *.dot application/msword MS Word Template
    *.dtd application/xml-dtd Document Type Definition
    *.dwg image/vnd.dwg AutoCAD Drawing Database
    *.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
    *.gif image/gif Graphic Interchange Format
    *.htm text/html HyperText Markup Language
    *.html text/html HyperText Markup Language
    *.jp2 image/jp2 JPEG-2000
    *.jpe image/jpeg JPEG
    *.jpeg image/jpeg JPEG
    *.jpg image/jpeg JPEG
    *.js text/javascript, application/javascript JavaScript
    *.json application/json JavaScript Object Notation
    *.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
    *.mp3 audio/mpeg MPEG Audio Stream, Layer III
    *.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
    *.mpeg video/mpeg MPEG Video Stream, Layer II
    *.mpg video/mpeg MPEG Video Stream, Layer II
    *.mpp application/vnd.ms-project MS Project Project
    *.ogg application/ogg, audio/ogg Ogg Vorbis
    *.pdf application/pdf Portable Document Format
    *.png image/png Portable Network Graphics
    *.pot application/vnd.ms-powerpoint MS PowerPoint Template
    *.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
    *.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
    *.rtf application/rtf, text/rtf Rich Text Format
    *.svf image/vnd.svf Simple Vector Format
    *.tif image/tiff Tagged Image Format File
    *.tiff image/tiff Tagged Image Format File
    *.txt text/plain Plain Text
    *.wdb application/vnd.ms-works MS Works Database
    *.wps application/vnd.ms-works Works Text Document
    *.xhtml application/xhtml+xml Extensible HyperText Markup Language
    *.xlc application/vnd.ms-excel MS Excel Chart
    *.xlm application/vnd.ms-excel MS Excel Macro
    *.xls application/vnd.ms-excel MS Excel Spreadsheet
    *.xlt application/vnd.ms-excel MS Excel Template
    *.xlw application/vnd.ms-excel MS Excel Workspace
    *.xml text/xml, application/xml Extensible Markup Language
    *.zip aplication/zip Compressed Archive
         
  • 相关阅读:
    STRIDE威胁分析与DREAD威胁评价
    HashMap 几大问题
    java 集合中的错误检测机制
    科创人·StreamNative翟佳:开源模式价值为王,基础软件的未来在国内社区
    科创人·云柚智能CEO汤峥嵘:价值观一致奠定共事基础,技术创新加速行业变革
    科创人·微软中国CTO韦青:数智时代创业得跳下巨人肩膀,还需掌握基础知识和逻辑能力
    科创人研习社·微智云CEO 张虎:从CTO到创始人关键是扩大视野半径
    科创人·天云数据CEO雷涛:打造正确理解数智的认知体系
    neovim环境与vim简单使用
    MIT6.828——Lab3 PartA(麻省理工操作系统实验)
  • 原文地址:https://www.cnblogs.com/DevilX5/p/7391262.html
Copyright © 2011-2022 走看看