mvc上传图片
长时间没有接触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: 0; /*设置此控件透明度为零，即完全透明*/ filter: alpha(opacity=0); /*设置此控件透明度为零，即完全透明针对IE*/ font-size: 100px; position: absolute; /*绝对定位，相对于 .input */ top: 0; right: 0; } </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 > 0) { 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，输出二级制文件内容。
