废话不多说,上代码:

用到的js文件:

jquery.min.js

jquery.easyui.min.js

<input id="fileurl" onclick="$('#imageUpLoad').click();"/>
<input type="button" value="上传" onclick="document.getElementById('form1').submit();"> <div style="display:none; position:absolute; top:0; left:0;">
<iframe name="uploadResponse"></iframe>
<form id="form1" runat="server" action="/UploadFile/UpLoadImage/" method="post" enctype="multipart/form-data" target="uploadResponse">
<input type="file" id="imageUpLoad" name="imageUpLoad" style="display:none;" onchange="$('#fileurl').attr('isLoad','0');">
<input id="imageType" name="imageType" value="floor" style="display:none;"/>
</form>
<script type="text/javascript">
function CallBack(path) {
$("#fileurl").attr('isLoad', '1').val(path);
$.messager.alert('提示信息', '上传成功!', 'info');
}
</script>
</div>

isLoad 属性是我自己添加的属性,用来判断图片是否提交

ps:记得在window.load事件中初始化这个属性,因为低版本的ie不支持<input isLoad="1"/>这种格式

后台代码

using System.Web;
using System.Web.Mvc;public class UploadFileController : Controller
{
//
// GET: /UploadFile/ public ActionResult Index()
{
return View();
} public void UpLoadImage(HttpPostedFileBase imageUpLoad, string imageType)
{
string returnFilePath = imageUpLoad.FileName;
//这里是我自己写的一段创建文件路径并保存的代码,可以直接imageUpLoad.SaveAs("文件路径");来保存
Helper.SaveFile(imageUpLoad, Helper.FileType.Images, imageType, ref returnFilePath); returnFilePath = returnFilePath.Replace("\\", "/"); Response.Write(string.Format("<script type='text/javascript'>window.parent.CallBack('" + returnFilePath + "');</script>"));
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO; public class Helper
{  

    /// <summary>
    /// 文件类型
    /// </summary>
    public enum FileType {
      Images,
      Files
    }

    public static bool SaveFile(HttpPostedFileBase f, FileType ft, string separator,ref string path)
{
try
{
string FilePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, ft.ToString());
if (!Directory.Exists(FilePath))
Directory.CreateDirectory(FilePath); FilePath = Path.Combine(FilePath, separator);
if (!Directory.Exists(FilePath))
Directory.CreateDirectory(FilePath); FilePath = Path.Combine(FilePath, path);
f.SaveAs(FilePath);
path = Path.Combine(ft.ToString(), separator, path);
return true;
}
catch (Exception ex){
LogHelper.Error(ex);
}
return false;
}
}

这里主要说明一下html界面form的参数:

action : 你的mvc处理文件上传的路径

method:提交方式

enctype:这个一定要写对“multipart/form-data”

target:值“uploadResponse”表示回传的接收页面地址,这里是一个iframe,避免了回传刷新页面

后台cs代码说明:

UpLoadImage:方法名要和地址一致
参数:
HttpPostedFileBase imageUpLoad  
imageUpLoad 应该是上传文件控件的name值
string imageType

同上iamgeType 为文本控件的name值
如果你有多个参数需要传递到后台,可以按照这个格式自定义参数个数 当然还有一种方法可以放函数不带参数
使用request来处理传递过来的文件和参数,请网上自行查阅资料。

MVC ajax 上传文件的更多相关文章

  1. asp.net MVC ajax上传文件

    普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...

  2. C# MVC ajax上传 文件

    用普通的ajax提交表单的时候,不能把文件流传到后端去,所以要用到jquery.form.js jquery.form.js到官网下载或者从这里下载:http://pan.baidu.com/s/1c ...

  3. spring mvc + ajax上传文件,页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  4. MVC Ajax上传文件

    前台:首先要导入jQuery <html><head> <meta name="viewport" content="width=devic ...

  5. .net mvc ajax 上传文件

    1.前端 <div> <input type="file" id="upfile" /> <button type="b ...

  6. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  7. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  8. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  9. 关于Extjs MVC模式上传文件的简单方式

    Extjs新手研究上传文件的事情估计是件很头痛的问题,毕竟,我就在头痛.最近两天一直在忙文件上传问题,终于小有收获. 用的是Extjs+MVC3.0+EF开发,语言为C#.前台window代码显示列内 ...

随机推荐

  1. mysql添加索引

    1.添加PRIMARY KEY(主键索引)  mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `column` ) 2.添加UNIQUE(唯一索 ...

  2. Java类的执行顺序

    在Java中一个类包括:构造块.构造方法.静态块.main方法.普通方法. 通过下面的例子将看出一个类中各种方法的执行顺序: /** * @author zhengbinMac */ public c ...

  3. JVM——类加载器的双亲委派模型

    类加载器双亲委派模型,如下图所示: 双亲委派模型的工作过程 如果一个类加载器收到了类加载的请求,它首先不会自己去尝试加载这个类,而是把这个请求委派给父类加载器去完成,每一个层次的类加载器都是如此,因此 ...

  4. webstorm安装破解版

    破解方法: 现在有个比较简单的注册方法.注册时选择“License server”输入“http://15.idea.lanyus.com/”点击“OK”即可快速激活JetBrains系列产品”

  5. 64 位系统遇到未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0

    本人写的.net程序部署在windowsserver 2003的操作系统上正常,部署到windows server 2008上时候报错“未在本地计算机上注册 Microsoft.Jet.OLEDB.4 ...

  6. python GUI模块的转变

    Tkinter → tkintertkMessageBox → tkinter.messageboxtkColorChooser → tkinter.colorchoosertkFileDialog ...

  7. 麒麟OS剽窃

    今年对于我们的IT行业来说可以算是耻辱的一年. 首先是“汉芯丑闻”,上海交大研制了一个所谓的国内第一个完全拥有自主知识产 权的DSP芯片(数字信号微处理器)——“汉芯”,研制人陈进教授以此领取政府一亿 ...

  8. 第三百六十天 how can I 坚持

    看了两集linux视频,有点懵啊,下班还想走去天安门,想啥呢,太远了. 居住证没法办,哎,要入职两年. 考研要是也不能考,这一年也太.. 点不会那么背吧. 好像没啥了,睡觉.

  9. 第三百二十五天 how can I 坚持

    任何事情都是相对的,以后禁止专牛角尖. 今天在家堕落了一天,说好的把天气应用,照葫芦画瓢弄好,结果什么也没弄. 和你 有个毛线关系啊,哈哈,太逗了. 准备睡觉,一切随缘,反正想也没什么用,自己也搞不懂 ...

  10. Hadoop学习笔记(2)

    Hadoop学习笔记(2) ——解读Hello World 上一章中,我们把hadoop下载.安装.运行起来,最后还执行了一个Hello world程序,看到了结果.现在我们就来解读一下这个Hello ...