zoukankan      html  css  js  c++  java
  • mvc file控件无刷新异步上传操作

    前言

      上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件。今天遇到一个问题:input控件file无法进行异步无刷新上传。真真的感到别扭。所以就尝试这去处理了一下。主要分三个部分:上传类的封装,html input控件file处理和后台controller的调用。

    上传封装类:

      此类主要两个功能,一些简单的筛选和文件重命名操作。

    文件的筛选包括:

      文件类型,文件大小

    重命名:

      其中默认为不进行重命名操作,其中重命名默认为时间字符串DateTime.Now.ToString("yyyyMMddHHmmss")

    文件地址:

      可进行自定义。相对地址与绝对地址都可以。

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.IO;
    using System.Web;
    namespace CommonHelper
    {
        public class UploadFile : System.Web.UI.Page
        {
            public UploadFile()
            {
    
            }
            //错误信息
            public string msg { get; set; }
            public string FullName { get; set; }
            //文件名称
            public string FileName { get; set; }
            /// <summary>
            /// 文件上传
            /// by wyl 20161019
            /// </summary>
            /// <param name="filepath">文件上传地址</param>
            /// <param name="size">文件规定大小</param>
            /// <param name="filetype">文件类型</param>
            /// <param name="files">file上传的文件</param>
            /// <param name="isrename">是否重名名</param>
            /// <returns></returns>
            public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false)
            {
                filepath = Server.MapPath(filepath);
                //文件夹不存在就创建
                if (!Directory.Exists(filepath))
                    Directory.CreateDirectory(filepath);
                if (HttpContext.Current.Request.Files.Count == 0)
                {
                    msg = "文件上传失败";
                    return false;
                }
                msg = "上传成功";
                var file = HttpContext.Current.Request.Files[0];
                if (file.ContentLength == 0)
                {
                    msg = "文件大小为0";
                    return false;
                }
                if (file.ContentLength > size * 1024)
                {
                    msg = "文件超出指定大小";
                    return false;
                }
                var filex = HttpContext.Current.Request.Files[0];
                string fileExt = Path.GetExtension(filex.FileName).ToLower();
                if (filetype.Count(a => a == fileExt) < 1)
                {
                    msg = "文件类型不支持";
                    return false;
                }
                if (isrename)
                    FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExt;
                FileName = filex.FileName;
                FullName = Path.Combine(filepath, FileName);
                file.SaveAs(FullName);
                return true;
            }
        }
    }

    上传文件的方法在这也没有什么过得的介绍。看代码注释应该都好理解。

    页面html

    <div class="content">
    <form method="post" target="hidden_frame" enctype="multipart/form-data" action="/CustomFrom/FormDesign/FileUpload" name="form">
    <input class="m input" name="fileName" type="file">
    <input class="btn file-input" value="提交..." name="F2" type="submit">
    <iframe id="hidden_frame" name="F2" style="display: none">
    <html>
    <head></head>
    <body></body>
    </html>
    </iframe>
    </form>
    </div>

    注:因为mvc上传文件input控件file不支持异步无刷新上传,故此用调用跳转到iframe的方式进行上传无刷新操作。

    以上页面就是上传控件的html定义。有几点要注意的

    1.enctype="multipart/form-data"必须加上,表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作. enctype="multipart/form-data"是上传二进制数据; form里面的input的值以2进制的方式传过去。

    2.form的name 要加上

    3.提交按钮是submit,当然你如果想写js 设置成button也成。这个没什么好说的。

    4.iframe 中style="display: none"

    以上就是整个的布局和提交上传文件到后台,并且跳转到ifrom中,接下来就是接受调用上面上传文件的方法。然后在iframe页面提示上传结果,然后把iframe关闭即可。

    后台代码:

      [HttpPost]
            public ActionResult FileUpload()
            {
                //从配置文件中获取支持上传文件格式
                string[] fileType = ConfigurationManager.AppSettings["fileType"].Split('|');
                //上传文件路径
                string strPath = ConfigurationManager.AppSettings["strPath"];
                UploadFile file=    new UploadFile();
                bool flag = file.upload_file(strPath, 25000, fileType);
                return Content("<script>window.alert('" + file.msg + "');window.top.close()</script>");
            }

    注:

    1.文件路径,文件保存路径放在了配置文件中,当然你也可以把文件大小,是否重命名都放到配置文件中。

    2.返回到view的脚本先弹出提示框;在关闭窗口

    3.根据你自己的需要去调用UploadFile的msg(错误提示),FullName (全名称), FileName文件名称进行操作

    4.window.top.close()关闭当前iframe的窗口,针对于兼容性请大家自行处理,我测试的没有问题。

  • 相关阅读:
    利用dockerfile定制镜像
    发布Docker 镜像到dockerhub
    Docker 停止容器
    133. Clone Graph
    132. Palindrome Partitioning II
    131. Palindrome Partitioning
    130. Surrounded Regions
    129. Sum Root to Leaf Numbers
    128. Longest Consecutive Sequence
    127. Word Ladder
  • 原文地址:https://www.cnblogs.com/wyl1924/p/5992646.html
Copyright © 2011-2022 走看看