MVC ajax 上传文件
废话不多说,上代码:
用到的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 上传文件的更多相关文章
- asp.net MVC ajax上传文件
普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...
- C# MVC ajax上传 文件
用普通的ajax提交表单的时候,不能把文件流传到后端去,所以要用到jquery.form.js jquery.form.js到官网下载或者从这里下载:http://pan.baidu.com/s/1c ...
- spring mvc + ajax上传文件,页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
- MVC Ajax上传文件
前台:首先要导入jQuery <html><head> <meta name="viewport" content="width=devic ...
- .net mvc ajax 上传文件
1.前端 <div> <input type="file" id="upfile" /> <button type="b ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- Asp.Net Mvc异步上传文件的方式
今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...
- spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- 关于Extjs MVC模式上传文件的简单方式
Extjs新手研究上传文件的事情估计是件很头痛的问题,毕竟,我就在头痛.最近两天一直在忙文件上传问题,终于小有收获. 用的是Extjs+MVC3.0+EF开发,语言为C#.前台window代码显示列内 ...
随机推荐
- 【转】在Source Insight中看Python代码
原文网址:http://www.cnblogs.com/xuxm2007/archive/2010/09/02/1815695.html SI是个很强大的代码查看修改工具,以前用来看C,C++都是相当 ...
- 如何在VMware虚拟机间建立共享磁盘?
在同一台电脑上,有时难免要安装多个虚拟机,存储空间就成了最大的问题,那么如何解决虚拟机的硬盘问题呢,Vmware自带的工具可以很好的解决此问题,下面我们就来看看如何在Vmware虚拟机间建立共享磁盘? ...
- 平板与PC的文件交互及播放
发现在kindle上可以用ES开个浏览器,把FTP打开,实现文件的互访,之前还弄了一个大圈下了一大堆的垃圾软件, 而看电脑上的流媒体的话,则可以用dice播放器add一下samba就可以了
- Docker 基础技术:Linux Namespace(下)
导读 在Docker基础技术:Linux Namespace(上篇)中我们了解了,UTD.IPC.PID.Mount 四个namespace,我们模仿Docker做了一个相当相当山寨的镜像.在这一篇中 ...
- Bat 循環執行範例
@echo off @echo Please key in runcount num. Info:max=100 set /p a= for /l %%i in (1,1,%a%) do ( echo ...
- Delphi 之前解析串口数据
//串口接收数据procedure TfrmClientMain.Comm1ReceiveData(Sender: TObject; Buffer: Pointer; BufferLength: Wo ...
- Free Candies
题意: 有4堆东西,每堆有n个每个有一个颜色,现在有一个篮子最多能装5个不同的颜色的东西,每次都从堆顶拿,当篮子出现两个相同颜色,可以获得这两个东西,求获得的最大数量 分析: 因为就4推,可以把各堆的 ...
- java中的类实现comparable接口 用于排序
import java.util.Arrays; public class SortApp { public static void main(String[] args) { Student[] s ...
- 2014搜狗前端面经【B事业部】
本来就投了一份简历,后来又收到了个B事业部的面试电话,今天刚面完一面,总体感觉还是很基础的,其中一名面试官帅到不行啊!另一个也不差,真是幸胡...(sorry,跑题了...) 上来先做了份笔试题,超级 ...
- android 使用虚拟机安装apk(图文教程)(转)
1.启动虚拟机 2.我的android sdk在“E:\android\android开发环境\android SDK\platform-tools”把要安装的apk复制到这个根目录(和adb.exe ...