表单提交学习笔记（三）—利用Request.Files上传图片并预览

一、html页面如下

<div id="container">
    <form id="myForm">
        <p class="img_P"><img id="previewPic" name="previewPic" /></p>
        <p><input type="file" id="imgUpload" name="imgUpload" /></p>
        <p><button id="submitBtn" type="button" value="提交">提交</button></p>
    </form>
</div>

二、实现上传图片预览功能

    $(function () {
        $('#imgUpload').on('change', function () {
            var file = this.files[0];
            if(this.files&&file)
            {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#previewPic').attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        })
    })

三、将图片传到后台（图片存储到固定文件夹下）

       view页面的代码如下（页面需引用jquery和jquery.form.js两个文件）：

        $('#submitBtn').on('click', function () {
            $('#myForm').ajaxSubmit({
                type: 'post',
                url: '/Form/ImgSubmit',
                success: function (data) {
                }
            })
        })

Controller代码

        [HttpPost]
        public ActionResult ImgSubmit()
        {
            if (Request.Files.Count>0)
            {
                string extension = string.Empty;
                HttpPostedFileBase file = Request.Files[0] as HttpPostedFileBase;
                if (file.FileName.Length > 0)
                {
                    if (file.FileName.IndexOf('.') > -1)
                    {
                        //原来也可以这用获取扩展名
                        //extension = file.FileName.Remove(0, file.FileName.LastIndexOf('.'));
                        string filePath = "/Upload/";
                        //创建路径
                        CreateFilePath(filePath);
                        if (file.FileName.ToString() != "")
                        {
                            string absoluteSavePath = System.Web.HttpContext.Current.Server.MapPath("~" + filePath);
                            var pathLast = Path.Combine(absoluteSavePath, file.FileName);
                            file.SaveAs(pathLast);
                        }
                    }
                }
            }
            return Content("success");
        }

        /// <summary>
        /// 当存储的文件路径不存在时，创建文件路径
        /// </summary>
        /// <param name="savePath">保存路径（非绝对路径）</param>
        public static void CreateFilePath(string savePath)
        {
            string Absolute_savePath = System.Web.HttpContext.Current.Server.MapPath("~" + savePath);
            if (!Directory.Exists(Absolute_savePath))
                Directory.CreateDirectory(Absolute_savePath);
        }

注：在做的过程中，遇到了上传了图片，但是后台总是接收不到（Request.Files.Count总是为0），原因可能如下：

1、<form> 不能被嵌套（一个页面可以有多个form，但是不能被嵌套）

2、<form method="post" ,enctype="multipart/form-data" ></form>

3、<input type="file" id="imgUpload" name="imgUpload" /> 一定要有name属性