欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网络编程 >> .Net编程 >> .net实例教程 >> .net使用iframe实现file控件无刷新异步上传
  • .net基础教程
  • .net实例教程
  • .net数据库专题
  • .net高级技巧
  • .net使用iframe实现file控件无刷新异步上传

    来源:中国网页设计 浏览:535

    内容提要:这篇文章主要为大家分享了mvc file控件无刷新异步上传实现方法,程序源码主要分三个部分:上传类的封装,html input控件file处理和后台controller的调用。

    上传文件应该是很常见的一个操作,网上也有很多提供的上传控件。因为mvc上传文件input控件file不支持异步无刷新上传,故此用调用跳转到iframe的方式进行上传无刷新操作。

    程序源码主要分三个部分:上传类的封装,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>

    注意事项:

    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的窗口,针对于兼容性请大家自行处理,中国网页设计站长测试没有问题。

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计