长时间没有接触mvc，有点生疏了，这次mvc上传图片功能完成后，简单地总结下。
我围绕这三块介绍，首先是前台form表单：
<style>
#file_name {
width: 400px;
height: 30px;
} a.inputFileBrowser {
width: 50px;
height: 34px;
line-height: 34px;
background: #3091d1;
text-align: center;
display: inline-block; /*具有行内元素的视觉，块级元素的属性 宽高*/
overflow: hidden; /*去掉的话，输入框也可以点击*/
position: relative; /*相对定位，为 #file 的绝对定位准备*/
border-radius: 3px;
left: 3px;
text-decoration: none;
color: #FFF;
} a.inputFileBrowser:hover {
background: #31b0d5;
color: #ffffff;
} #file {
opacity:; /*设置此控件透明度为零，即完全透明*/
filter: alpha(opacity=0); /*设置此控件透明度为零，即完全透明针对IE*/
font-size: 100px;
position: absolute; /*绝对定位，相对于 .input */
top:;
right:;
}
</style>
<form id="form1" enctype="multipart/form-data">
<input class="form-control" type="text" id="file_name" readonly="readonly" value="" style=" background:#fff; height:34px; line-height:34px;">
<a href="javascript:void(0);" class="inputFileBrowser">
浏览
<input type="file" id="file" name="File">
</a>
<button id="saveCover" class="btn btn-primary" style="margin-left:5px; position:relative; top:-14px;">上传</button>
<div id="result"></div>
<div id="divError" class="alert alert-danger" style="display:none; margin-bottom:0px;"></div>
</form>
1、form表单必须加enctype属性，它默认值：application/x-www-form-urlencoded，也是post提交数据的时候，我们经常指定的Content-Type的值。数据将以键值对发送。上传文件时，它的值:multipart/form-data，用来上传二进制文件。
2、由于我们对input type=“file” 文件上传控件无法自定义样式，因此，这里有个投机取巧的实现，原理：改变该控件的透明度，用a连接把file包在里面，然后用一个文本框来显示file控件选择的值。
这样就得用js控制显示：
$(function () {
$("#file").change(function () {
var fileSize = this.files[0].size;
var size = fileSize / 1024 / 1024;
if (size > 4) {
alert("图片不能大于4M,请处理后重新上传！");
this.value = "";
return false;
} else {
$("#file_name").val($("#file").val().replace("C:\\fakepath\\",""));
}
})
});
由于浏览器考虑到安全问题，所以我们不能直接把客户端的文件路径取出来，其实这里又有一个”投机取巧”的实现，webkit内核的浏览器就是这么干的，直接显示文件名，而不显示路径。我把路径给替换为空了（真实的路径被浏览器替换为虚假的路径）。
到此为止，图片上传的前台部分，还没有结束。form表单提交有个讨厌的地方，就是你不想提交后，让它跳转，也不想提交后，地址栏发生任何变化。然而这一切，还得我们自己处理。我用到了form提交的jquery插件：jquery.form.js，接下来，该ajax出场了。我的目标是上传一张图片，然后及时地预览。
$('#saveCover').click(function (event) {
event.preventDefault();
$("#form1").ajaxSubmit(
{
url: '/AcademicPublish/UploadCover',
type: 'post',
cache: false,
success: function (result) {
if (result.IsSuccess) {
$("#CoverImg").val(result.FilePath);
$("#result").html("<img src='" + result.FilePath + "'/>");
}
},
fail: function (jqXHR, textStatus, errorThrown) {
$("#divError").show();
$("#divError").html("图像保存失败。");
}
})
});
event.preventDefault() 这句非常关键，如果没有的话，form提交后，地址栏会出现图片名称等一系列参数，尽管我们用的是post提交方式。还有另外一点值的注意，如果我们把图片保存在客户端的其它地方，而不是项目的路径下，那么页面上是拒绝显示图片的。
前台的实现是重点，后台的实现其实比较简单：
/// <summary>
/// 上传封面
/// </summary>
[AllowAnonymous]
[HttpPost]
public ActionResult UploadCover()
{
HttpPostedFileBase image = Request.Files["File"];
if (image != null && image.ContentLength > )
{
string fileName = DateTime.Now.ToString("yyyyMMdd") + "-" + Path.GetFileName(image.FileName); string baseDir = "/Content/files/Covers";
string imgpath = Server.MapPath("~" + baseDir);
if (System.IO.Directory.Exists(imgpath) == false) //如果不存在就创建file文件夹
{
System.IO.Directory.CreateDirectory(imgpath);
}
string filePath = Path.Combine(imgpath, fileName);
image.SaveAs(filePath); var imagePath = Path.Combine(baseDir, fileName); return Json(new { IsSuccess = true, FilePath = imagePath });
}
else
{
return Json(new { IsSuccess = false, FilePath = "" });
} }
调用HttpPostedFileBase的SaveAs方法即可。假如我们把图片保存到项目以外的地方，还想在前台显示图片，怎么办呢？我们用FileStream读取图片，取得二进制内容，可以考虑base64，当然有其它方法，比如专门请求图片，最后Response.Write，输出二级制文件内容。