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的窗口，针对于兼容性请大家自行处理，我测试的没有问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。
相关文章
- 本文章来人大家介绍一个php文件上传类的使用方法，期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类， 它可以帮...2016-11-25
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
详解Maven profile配置管理及激活profile的几种方式
这篇文章主要介绍了详解Maven profile配置管理及激活profile的几种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-26- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- PHP代码如下：复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 本案例非通用，仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- APC模块，它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来， 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09
- 本文实例讲述了PHP多文件上传类，分享给大家供大家参考。具体如下：<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-11-12
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-01