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，输出二级制文件内容。