ajax上传图片

1、在CSHTML页面：

引用一下两个jquery

<!--改文件的引用用来做异步上传-->

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.form.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>

前台的页面

<p class="mb15">
<img src="" id="upLoadImageShow" width="100" height="100" />
<br />
<a id="system" style="cursor: pointer;" onclick="selectSettingType()">选择上传图片</a>
</p>
<p class="mb15">

<div id="upload" class="cb mt10" style="display: none;">

<div id="upload_title" class="mt10">
<h4>选择本地图片上传</h4>
<span id="errorInfoSpan" class="red"></span>
</div>
<iframe name="hd" style="display: none;"></iframe>
<form id="fileForm" method="post" action="@Url.Content("~/Admin/File/ImageUpLoad")" enctype="multipart/form-data" >
<input type="file" name="upImage" class="mt10" size="50" />
<input id="btnUpload" type="button" value="上传" />
<span class="gray">图片格式 jpg/gif 小于1M</span><br />
</form>
</div>

下面是前台的javascript

function selectSettingType() {
if (document.getElementById("upload").style.display == 'none') {
document.getElementById("upload").style.display = "block";
document.getElementById("system").style.display = "none";
} else {
document.getElementById("system").style.display = "block";
document.getElementById("upload").style.display = "none";
}
}//这个用来显示和隐藏上传按钮，主要是交互性会好点而已

function isImageFileName(str) {
var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)/;
if (reg.test(str)) {
return true;
}
return false;
}//这个函数是判断返回的值是不是包含图片，因为后天返回值有几种，正确上传返回图片存储路径

$(function () {
//异步上传图片
$("#btnUpload").click(function () {
if ($("#upImage").val() == "") {
alert("请选择一个图片文件，再点击上传。");
return;
}
alert(1);
$('#fileForm').ajaxSubmit({
success: function (msg) {
var start = msg.indexOf(">");
if (start != -1) {
var end = msg.indexOf("<", start + 1);
if (end != -1) {
msg = msg.substring(start + 1, end);
}
}//上面这一段是因为在谷歌等一些浏览器会导致获取的值包含<pre>标签
var regex = new RegExp("\"", "g");
msg = msg.replace(regex, "")
//这段是有些浏览器会给msg字符串加上双引号的标签，现在就去掉双引号标签
if (isImageFileName(msg))
{
alert(msg);
$("#upLoadImageShow").attr('src', msg);//这里是重新设置图片的地址
}
else
alert(msg);
}
});
});
});

2、下面是FileController控制器的代码

namespace AutoLearning.Areas.Admin.Controllers
{
/// <summary>
/// 作用：文件上传控制器
/// 开发者：刘日辉
///开发时间： 2013-7-17
/// </summary>
public class FileController : Controller
{

[HttpPost]
public ActionResult ImageUpLoad()
{
//定义错误消息
string msg = "";
//接受上传文件
HttpPostedFileBase hp = Request.Files["upImage"];
if (hp == null)
{
msg = "请选择文件.";
}
//获取上传目录 转换为物理路径
string uploadPath = Server.MapPath("~/Areas/Admin/Content/images/actives/");
//获取文件名
string fileName = DateTime.Now.Ticks.ToString()+System.IO.Path.GetExtension(hp.FileName);
//获取文件大小
long contentLength = hp.ContentLength;
//文件不能大于1M
if (contentLength > 1024 * 1024)
{
msg = "文件大小超过限制要求.";
}
if (!checkFileExtension(fileName))
{
msg = "文件为不可上传的类型.";
}
//保存文件的物理路径
string saveFile = uploadPath + fileName;
try
{
//保存文件
hp.SaveAs(saveFile);
msg = "/Areas/Admin/Content/images/actives/" + fileName;
}
catch {
msg = "上传失败.";
}
return Json(msg);
}
/// <summary>
/// 检查文件后缀名是否符合要求
/// </summary>
/// <param name="fileName"></param>
/// <returns></returns>
private bool checkFileExtension(string fileName)
{
//获取文件后缀
string fileExtension = System.IO.Path.GetExtension(fileName);
if (fileExtension != null)
fileExtension = fileExtension.ToLower();
else
return false;

if (fileExtension != ".jpg" && fileExtension != ".gif")
return false;

return true;
}

}
}

本文修改：解决IE环境下返回的ＪＳＯＮ解析成下载文件的问题：
把ｃｏｎｔｒｏｌｌｅｒ里面的ｊｓｏｎ（msg）修改成：

JsonResult rs = Json(msg);
rs.ContentType = "text/html";
return rs;