mvc file控件无刷新异步上传操作源码

来源：懂视网责编：小采时间：2020-11-27 22:36:23

mvc file控件无刷新异步上传操作源码

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

推荐度：

点击下载本文 文档为doc格式

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

前言

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

mvc file控件无刷新异步上传操作源码

推荐度：

点击下载本文 文档为doc格式

标签：上传上传文件 File

热门焦点

mvc file控件无刷新异步上传操作源码

mvc file控件无刷新异步上传操作源码

mvc file控件无刷新异步上传操作源码

最新推荐

猜你喜欢

热门推荐