表单提交学习笔记（三）—利用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>)
             {
                 string extension = string.Empty;
                 HttpPostedFileBase file = Request.Files[] as HttpPostedFileBase;
                 if (file.FileName.Length > )
                 {
                     if (file.FileName.IndexOf('.') > -)
                     {
                         //原来也可以这用获取扩展名
                         //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属性