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 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 存放网络图片到本地 下载图片保存图片从本地打开所有代码Nuget安装

有时候我们的网络很垃圾,我的的UWP要在第一次打开网络图片,就把图片存放到本地,下次可以从本地打开。 有时候用户使用的是流量网络,不能每次都联网下载。 我们不得...

761
来自专栏緣來來來

Mac 下使用tree命令列目录

相信很多使用过Linux的用户都用过tree命令,它可以像windows的文件管理器一样清楚明了的显示目录结构。不过有是有并不是系统本身就自带的,如果需要的话,...

1271
来自专栏张善友的专栏

使用API Key验证WCF Data Service

Ron Jacobs 有篇文章介绍如何在WCF Rest Service中使用API Key验证:http://blogs.msdn.com/b/rjacobs...

2338
来自专栏技术博客

WCF HttpContext.Current为空的问题

原来在项目中使用HttpContext.Current没什么问题,但是到了中期阶段,项目重构等,并且要求使用WCF,所以就出现了HttpContext.Curr...

982
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(90)-EF 扩展操作

这次我们来看 EntityFramework-Plus(免费开源) 库的用法相比其他扩展库,这个更加新并且用法更加简单

1120
来自专栏跟着阿笨一起玩NET

.Net下收发邮件第三方公共库

http://www.lumisoft.ee/lswww/download/downloads/Net/

1291
来自专栏微服务

RabbitMQ的基本使用到高级特性

简介 继上一篇 CentOS上安装RabbitMQ讲述RabbitMQ具体安装后,这一篇讲述RabbitMQ在C#的使用,这里将从基本用法到高级特性的使用讲述。...

31011
来自专栏晓晨的专栏

asp.net mvc 实现上传文件带进度条

2882
来自专栏跟着阿笨一起玩NET

关于.NET邮件的收发问题总结

        最近因为项目需要,研究了一下邮件的发送和接收,发现现在这方面的问题很多.虽然网上这方面的资料很多,但是真正应用起来 仍然会发现不少问题,而且很多...

811
来自专栏听雨堂

页面状态保持机制(编辑中)

Web应用程序中,有很多状态需要在页面的反复回调中能够保持住,还有一些状态需要在页面之间保持。对于状态的保持,是一个值得研究的问题。状态处理不当是页面失效或错误...

2665

扫码关注云+社区