前言

　　上传文件应该是很常见必不可少的一个操作，网上也有很多提供的上传控件。今天遇到一个问题：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的窗口，针对于兼容性请大家自行处理，我测试的没有问题。

mvc file控件无刷新异步上传操作的更多相关文章

  1. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  2. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  5. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  6. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  7. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  8. 实用ExtJS教程100例-009：ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  9. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

随机推荐

  1. ASE周会记录

    本周Sprint Master Atma Hou 一． 本周会议概要 本次会议的主要任务是明确和老师讨论后的数据库设计定稿,同时为我们接下来的连接工作确定包含实现细节的story和接口. 二． 会议内 ...

  2. PAT Basic Level 1001

    大纲考察内容 数据存储结构:数组.链 基础算法:递归.排序.计算时间复杂度.空间复杂度.分析算法稳定性 1001.害死人不偿命的(3n+1)猜想 (15) https://www.patest.cn/ ...

  3. github教程

    http://www.yangzhiping.com/tech/github.html

  4. linux 星际词霸安装

    安装StarDict星际译王.这是linux系统中最常用的翻译软件之一,但好久没有更新了.Ubuntu14.04下直接在ubuntu软件中心中搜索stardict即可图形界面安装. 命令行安装:sud ...

  5. redis 操作 list 的测试

    lpush 从头部压入数据 127.0.0.1:6379> lpush listname value1 (integer) 1//返回list的当前长度 127.0.0.1:6379> l ...

  6. 在SQL中 给字符串补0方法

    --第一种方法SELECT RIGHT('00000'+CAST(ID AS nvarchar(50)),5) FROM dbo.TableName --左边补0,如 00001,00039 SELE ...

  7. solr基本入门

    一直想接触下搜索,虽然之前也玩了下solr,但一直没深入,所以也都忘得差不多了,现在solr都6.1了,发展真快.重新拾起,记录下也好,为以后出问题查找起来快一点. 1.搜索最重要的概念就是倒排索引, ...

  8. C#进阶目录

    一.Sql语句的性能优化 二.Quartz.NET的介绍 三.Log4.Net的介绍 四.Topshelf的介绍 五.Git的使用 六.IEnumerable接口迭代原理 七.Lambada表达式的演 ...

  9. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  10. JQuery动画队列问题

    在上网的时候经常会发现一些网站上发现一些bug,如导航菜单的动画队列问题(在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画 会被放到动画队列中,等前面的动画执行完成了才会执行) 要解决问题 ...