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

一、html页面如下

1 <div id="container">
2     <form id="myForm">
3         <p class="img_P"><img id="previewPic" name="previewPic" /></p>
4         <p><input type="file" id="imgUpload" name="imgUpload" /></p>
5         <p><button id="submitBtn" type="button" value="提交">提交</button></p>
6     </form>
7 </div>

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

 1     $(function () {
 2         $('#imgUpload').on('change', function () {
 3             var file = this.files[0];
 4             if(this.files&&file)
 5             {
 6                 var reader = new FileReader();
 7                 reader.onload = function (e) {
 8                     $('#previewPic').attr('src', e.target.result);
 9                 }
10                 reader.readAsDataURL(file);
11             }
12         })
13     })

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

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

1         $('#submitBtn').on('click', function () {
2             $('#myForm').ajaxSubmit({
3                 type: 'post',
4                 url: '/Form/ImgSubmit',
5                 success: function (data) {
6                 }
7             })
8         })

Controller代码

 1         [HttpPost]
 2         public ActionResult ImgSubmit()
 3         {
 4             if (Request.Files.Count>0)
 5             {
 6                 string extension = string.Empty;
 7                 HttpPostedFileBase file = Request.Files[0] as HttpPostedFileBase;
 8                 if (file.FileName.Length > 0)
 9                 {
10                     if (file.FileName.IndexOf('.') > -1)
11                     {
12                         //原来也可以这用获取扩展名
13                         //extension = file.FileName.Remove(0, file.FileName.LastIndexOf('.'));
14                         string filePath = "/Upload/";
15                         //创建路径
16                         CreateFilePath(filePath);
17                         if (file.FileName.ToString() != "")
18                         {
19                             string absoluteSavePath = System.Web.HttpContext.Current.Server.MapPath("~" + filePath);
20                             var pathLast = Path.Combine(absoluteSavePath, file.FileName);
21                             file.SaveAs(pathLast);
22                         }
23                     }
24                 }
25             }
26             return Content("success");
27         }
28 
29         /// <summary>
30         /// 当存储的文件路径不存在时，创建文件路径
31         /// </summary>
32         /// <param name="savePath">保存路径（非绝对路径）</param>
33         public static void CreateFilePath(string savePath)
34         {
35             string Absolute_savePath = System.Web.HttpContext.Current.Server.MapPath("~" + savePath);
36             if (!Directory.Exists(Absolute_savePath))
37                 Directory.CreateDirectory(Absolute_savePath);
38         }

注：在做的过程中，遇到了上传了图片，但是后台总是接收不到（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属性