表單提交學習筆記（三）—利用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屬性