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的窗口，针对于兼容性请大家自行处理，我测试的没有问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SpringMVC文件上传 多文件上传实例

    必须明确告诉DispatcherServlet如何处理MultipartRequest.SpringMVC中提供了文件上传使用方式如下配置xxx-servlet.xml,添加如下代码: 复制代码 代码如下: <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">          <!-- 设置

  • Spring MVC中上传文件实例

    SpringMVC(注解)上传文件需要注意的几个地方: 1.form的enctype="multipart/form-data",这个是上传文件必须的 2.applicationContext.xml配置: 复制代码 代码如下: <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.w

  • 用Html5与Asp.net MVC上传多个文件的实现代码

    用Html5与Asp.net MVC上传多个文件的实现代码

    复制代码 代码如下: <form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post"> <input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple

  • Asp.net实现MVC处理文件的上传下载功能实例教程

    上传于下载功能是程序设计中非常常见的一个功能,在ASP.NET程序开发中有着非常广泛的应用.本文就以实例形式来实现这一功能. 一.概述 如果你仅仅只有Asp.net Web Forms背景转而学习Asp.net MVC的,我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.FileUpload就是其中一个,而这个控件的缺席给我们带来一些小问题.这篇文章主要说如何在Asp.net MVC中上传文件,然后如何再从服务器中把上传过的文件下载下来. 二.实现方法 1.文件上传

  • 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website. Fine Uploader 不依赖于 jQuery,也就是说不引用jquery.js,也可以正常使用.同时,

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • ASP.NET MVC5实现文件上传与地址变化处理（5）

    ASP.NET MVC5实现文件上传与地址变化处理（5）

    一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hostin

  • SpringMVC上传图片与访问

    关于springmvc上传图片的方法小编给大家整理了两种方法,具体内容如下所示: 第一种:(放在该项目下的物理地址对应的位置) a. 路径写法: String basePath="/WEB-INF/resources/upload"; String filePathName= request.getSession().getServletContext().getRealPath(basePath);存放路径 b. 实际路径: D:\WorkSpace\.metadata\.plugi

  • asp.net MVC实现无组件上传图片实例介绍

    例子: 如我想上传一个图片到服务器端:asp页面 复制代码 代码如下: <form id="form1" runat="server" action="/bookIndex/fileUpLoad/(你准备处理的 ActionResult)" method="post" enctype="multipart/form-data"> <input type="file" i

  • asp.net MVC实现简单的上传功能

    方法一: Home/Index.aspx中的代码 复制代码 代码如下: <% using (Html.BeginForm("up","Home",FormMethod.Post,new{enctype="multipart/form-data"})) {%> <input type="file" name="upfile" /> <input type ="submi

随机推荐