如何解决mvcfile控件无刷新异步上传操作源码
创始人
2024-11-28 07:43:54
0次

上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件。今天遇到一个问题: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; }
  /// 
  /// 文件上传
  /// by wyl 20161019
  /// 
  /// 文件上传地址
  /// 文件规定大小
  /// 文件类型
  /// file上传的文件
  /// 是否重名名
  /// 
  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












注:因为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 中

以上就是整个的布局和提交上传文件到后台,并且跳转到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("");
  }

注:

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

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

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

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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...