健忘者系列-MVC图片上传（二）
上一篇我们说了不用插件，不用异步上传一个文件和多个文件，这一篇我们用jquery.form.js表单插件来实现异步和多个上传。
引用插件
<script src="~/Scripts/js/jquery.min.js"></script>
<script src="~/Scripts/js/jquery.form.js"></script>备注：先是引入jquery库然后再引入插件。
一个图片上传
我们先说一下异步上传一个文件，然后在后台返回图片的url，在表单上显示图片。
客户端代码
<div class="row-fluid">
<div class="span5">
<div class="widget-box">
<div class="widget-title">
<span class="icon"> <i class="icon-align-justify"></i> </span>
<h5>异步单个上传</h5>
</div>
<div class="widget-content nopadding">
<form id="form-yibu" action="/Upload/Up3_Handle" method="POST" class="form-horizontal" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label">姓名 :</label>
<div class="controls">
<input type="text" name="name" class="span5" placeholder="请输入姓名">
</div>
</div>
<div class="control-group">
<label class="control-label">头像 :</label>
<div class="controls">
<input type="file" name="image" class="span5" placeholder="请选择图片">
</div>
</div>
<div class="control-group" tag="imgView">
<label class="control-label">预览 :</label>
<div class="controls">
<img alt="" id="result" src="" width="100" height="100" />
</div>
</div>
<div class="form-actions">
<a href="javascript:void(0)" class="btn btn-success" tag="submit">提交</a>
</div>
</form>
</div>
</div>
</div>
</div>备注：我们form表单的id是form-yibu，返回展示图片的id是result，提交我们用了a标签。
JavaScript代码
<script>
$(document).ready(function () {
$("[tag='imgView']").hide();
$("[tag='submit']").click(function () {
var options = {
success: function (data) {
if (data.pic == "") {
alert(data.error);
} else {
$("#result").attr("src", data.pic);
$("[tag='imgView']").show();
}
}
};
//$("#form-yibu").ajaxSubmit(options);
$(this).parents("form").ajaxSubmit(options);
});
});
</script>备注：这里我们假如不想在form表单加上id可以这样写$(this).parents("form").ajaxSubmit(options);，但要注意层次的嵌套。options是用来处理返回的内容和错误的信息的，在提交的时候用作ajaxSubmit的参数。
后台服务器代码
服务器处理的方式跟之前的差不多，也是有两种方法。
第一种
[HttpPost]
public ActionResult Up3_Handle(string name)
{
//HttpPostedFileBase file = Request.Files["image"];
HttpPostedFileBase file = Request.Files[0];
string pic = "", error = "";
if (null != file && file.ContentLength != 0)
{
string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
file.SaveAs(filePath);
pic = "/UploadPic/" + file.FileName;
}
return Json(new { pic = pic, error = error });
}第二种
[HttpPost]
public ActionResult Up3_Handle(HttpPostedFileBase image, string name)
{
string filePath = Path.Combine(Server.MapPath("~/UploadPic"), image.FileName);
string pic = "", error = "";
try
{
image.SaveAs(filePath);
pic = "/UploadPic/" + image.FileName;
}
catch (Exception ex)
{
error = ex.Message;
}
return Json(new { pic = pic, error = error });
}效果
多个图片上传
多个图片上传我要增加添加多个图片的方法和展示多个图片的方法，后台一样是返回多个图片的路径。
客户端代码
<div class="row-fluid">
<div class="span5">
<div class="widget-box">
<div class="widget-title">
<span class="icon"> <i class="icon-align-justify"></i> </span>
<h5>异步多个上传</h5>
</div>
<div class="widget-content nopadding">
<form action="/Upload/Up3s_Handle" method="POST" class="form-horizontal" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label">姓名 :</label>
<div class="controls">
<input type="text" name="name" class="span5" placeholder="请输入姓名">
</div>
</div>
<div class="control-group">
<label class="control-label">头像 :</label>
<div class="controls">
<input type="file" name="image" class="span5" placeholder="请选择图片">
<a href="javascript:void(0)" class="btn btn-mini btn-info" tag="add"> <i class="icon-plus"></i> </a>
</div>
</div>
<div class="control-group" tag="imgView2">
<label class="control-label">预览 :</label>
<div class="controls" tag="imgView2-controls">
<img alt="" id="result" src="" width="100" height="100" />
</div>
</div>
<div class="form-actions">
<a href="javascript:void(0)" class="btn btn-success" tag="submit2">提交</a>
</div>
</form>
</div>
</div>
</div>
</div>JavaScript代码
<script>
$(document).ready(function () {
$("[tag='imgView2']").hide();
var taghtml = "<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"images\" class=\"span5\" placeholder=\"请选择图片\"> <a href=\"javascript:void(0)\" class=\"btn btn-mini btn-danger remove\"> <i class=\"icon-minus\"></i> </a></div></div>";
//添加内容
$("[tag='add']").click(function () {
$(this).parent().parent().after(taghtml);
//删除内容
$(".remove").click(function () {
$(this).parent().parent().remove();
});
});
$("[tag='submit2']").click(function () {
var options = {
success: function (data) {
if (data.Data == "") {
alert(data.ErrorMessage);
} else {
var imgHtml = "";
$.each(data.Data, function (i, val) {
imgHtml += "<img alt=\"\" id=\"result\" src=\"" + val.Url + "\" width=\"100\" height=\"100\" /> ";
});
$("[tag='imgView2-controls']").empty().append(imgHtml);
$("[tag='imgView2']").show();
}
}
};
$(this).parents("form").ajaxSubmit(options);
});
});
</script>后台服务器代码
服务器处理的时候也是有两种方法，其实处理和上一篇说的多个文件处理是没多大区别，只是增加了返回的json。
方法一
[HttpPost]
public ActionResult Up3s_Handle()
{
var liu=new List<ImgUrl>();
if (Request.Files != null && Request.Files.Count > 0)
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i];
if (file.ContentLength == 0) continue;
string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
file.SaveAs(filePath);
liu.Add(new ImgUrl() {Url = "/UploadPic/" + file.FileName});
}
}
return Json(new AjaxResultModel<List<ImgUrl>> { Data = liu });
}备注：这里 AjaxResultModel和 ImgUrl是我自己随便写的两个 model，用来包装数据更好的返回 json格式而已。下面也贴出来吧。
public class AjaxResultModel<T>
{
public AjaxResultModel()
{
ErrorMessage = string.Empty;
}
/// <summary>
/// 数据对象
/// </summary>
public T Data { get; set; }
/// <summary>
/// 错误数量
/// </summary>
public int Errors { get; set; }
/// <summary>
/// 错误信息
/// </summary>
public string ErrorMessage { get; set; }
}
public class ImgUrl
{
public string Url { get; set; }
public string Error { get; set; }
}方法二
[HttpPost]
public ActionResult Up3s_Handle(IEnumerable<HttpPostedFileBase> images, string name)
{
var liu = new List<ImgUrl>();
if (images != null && images.Any())
{
foreach (HttpPostedFileBase file in images)
{
if (file.ContentLength == 0) continue;
string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
file.SaveAs(filePath);
liu.Add(new ImgUrl() { Url = "/UploadPic/" + file.FileName });
}
}
return Json(new AjaxResultModel<List<ImgUrl>> { Data = liu });
}备注：其实后台接收的方法都是大同小异，关键是表单的名字要对上就行了。
效果
废话
细心的朋友可能会发现，上一篇是Up1的方法，现在是Up3的方法，是不是没有写Up2呢？其实是有的，本来我先第二篇说一下用ajaxfileupload.js来实现异步上传的，但是研究一下发现ajaxfileupload.js不太好用，也好久没更新了，对多个文件上传的处理也不太好，返回结果和mvc也不太兼容。网上虽然有人写了一些扩展实现对ajaxfileupload.js的多个文件上传的支持和绑定name上传，不用绑定id了，但我想想还是不说了，后面还有很多更加新的插件要说。
链接
上面在添加多个上传项的时候没有详细说明怎么实现，我这里有一篇是专门说这个的有兴趣的朋友可以去看看。Go