视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
mvc file控件无刷新异步上传操作源码
2020-11-27 22:36:23 责编:小采
文档

前言

  上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件。今天遇到一个问题: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"

下载本文
显示全文
专题