健忘者系列-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 });
        }

备注：我们这里是用json返回图片路径和错误信息。

效果

多个图片上传

多个图片上传我要增加添加多个图片的方法和展示多个图片的方法，后台一样是返回多个图片的路径。

客户端代码

    <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>

备注：这里我们用tag="add"处理添加多个文件，tag="imgView2"用来展示图片。

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拼接了多个img元素，以后我们都会讲到一些不需要自己写增加多文件和展示的插件，我们一步一步来，等待后续吧。

后台服务器代码

服务器处理的时候也是有两种方法，其实处理和上一篇说的多个文件处理是没多大区别，只是增加了返回的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