asp.net mvc Ajax.BeginForm 異步上傳圖片的問題

時間 2019-11-19

標籤 asp.net asp mvc ajax.beginform ajax beginform 異步上傳圖片問題欄目 ASP 简体版

原文原文鏈接

當debug到這裏，大家就發現無論是 Request.Files["Upload"]亦或 Request.Files[0] 都不會取到文件流。css

這就是我要說的，當使用Ajax.BeginForm(jquery.unobtrusive-ajax.js) 異步上傳是不可行的，由於文件流不會被C#代碼讀取，可是並不影響 Ajax.BeginForm(jquery.unobtrusive-ajax.js) 異步提交表單的特性。jquery

那我咱們應該如何異步提交表單呢？ajax

利用 $("#formID").ajaxSubmit({});這個方法異步提交表單而且上傳文件。數據庫

第一步：引入js 注意順序緩存

<script src="/Style/js/jquery-1.8.3.min.js"></script>
<script src="~/Style/js/jquery-form.js"></script>

jquery-form.js下載地址：http://download.csdn.net/download/yusewuhen/7203209異步

第二步：post

<form id="formID" method="post" enctype="multipart/form-data">
    <div class="inner text-center">
        <table class="" id="mess">
            <caption>基礎信息</caption>
            <tr class="margin-top">
                <td class="padding-top text-center">手機號</td>
                <td><input type="text" class="inputs" id="Phone" name="Phone"> </td>
                <td><input type="button" value="獲取驗證碼" id="sms" onclick="sendemail()"></td>
            </tr>
            <tr>
                <td class="padding-top text-center">驗證碼</td>
                <td><input type="text" class="inputs" id="Code" name="Code"></td>
            </tr>
            <tr>
                <td class="padding-top text-center">身份證</td>
                <td><input type="text" class="inputs" id="IdCard" name="IdCard"></td>
            </tr>
            <tr>
                <td class="padding-top text-center">身份證照片</td>
                <td>
                    <div class="ge_pic_icon_Infor">
                        <img src="images/zhengmian.png" />
                    </div>
                    <div class="Infor_file">
                        <input type="file" name="IdCardPos" id="IdCardPos" title="上傳身份證正面照片" />
                    </div>
                </td>
                <td>
                    <div class="ge_pic_icon_Infor2">
                        <img src="images/fanmian.png" />
                    </div>
                    <div class="Infor_file2">
                        <input type="file" name="IdCardNeg" id="IdCardNeg" title="上傳身份證反面照片" />
                    </div>
                </td>
            </tr>
        </table>
        <input class="submit next-btn" type="button" value="下一步" onclick="next_step()" />
    </div>
</form>

第三步：js處理異步提交ui

function next_step() {
    $("#formID").ajaxSubmit({
        url: "/College/BaseInfo", 
        type: "post",
        success: function (data) {
            //alert("ok");
            $(".detail-message6").css({ "display": "none" });
            $(".detail-message7").css({ "display": "block" });
        },
        error: function (aa) {
            //console.log(aa);
            $(".detail-message2").css({ "display": "none" });
            $(".detail-message6").css({ "display": "block" });
            $(".detail-message7").css({ "display": "none" });
        }
    });
}

第四步：後臺控制器處理url

        public ActionResult BaseInfo()
        {
            //上傳的圖片路徑
            string dir = "/Style/Upload/IdCard/";
            HttpPostedFileBase IdCardPos = Request.Files["IdCardPos"];
            HttpPostedFileBase IdCardNeg = Request.Files["IdCardNeg"];
            #region 接收參數校驗
            if (string.IsNullOrWhiteSpace(Request["Phone"]))
            {
                return Content("手機號不能爲空！");
            }
            if (string.IsNullOrWhiteSpace(Request["Code"]))
            {
                return Content( "驗證碼不能爲空！");
            }
            if (string.IsNullOrWhiteSpace(Request["IdCard"]))
            {
                return Content( "身份證號不能爲空！");
            }
            if (IdCardPos == null)
            {
                return Content("請上傳身份證正面照片！");
            }
            if (IdCardNeg == null)
            {
                return Content("請上傳身份證反面照片！");
            }
            #endregion

            //獲取緩存的驗證碼
            Object Code = CacheOpt.GetCache("Code");
            if (Code.ToString() != Request["Code"] || String.IsNullOrEmpty(Code.ToString()))
            {
                return Content("手機驗證碼不正確或已失效,請從新獲取驗證碼！");
            }

            #region 上傳身份證照片
            Dictionary<string, string> DicInfo = new Dictionary<string, string>();
            Dictionary<string, string> DicInfo2 = new Dictionary<string, string>();
            try
            {                
                DicInfo = UploadImg(IdCardPos, dir);
                if (DicInfo["Result"] == "0")
                {
                    return Content("身份證正面照片上傳的類型錯誤！");
                }
               
                DicInfo2 = UploadImg(IdCardNeg, dir);                                 
                if (DicInfo2["Result"] == "0")
                {
                    return Content("身份證反面照片上傳的類型錯誤！");
                }
            }
            catch
            {
                return Content("身份證正照片上傳失敗！");
            }
            #endregion

            #region 將數據提添加到集合中
            Dictionary < string, string> myDic = new Dictionary<string, string>();
            myDic.Add("Phone", Request["Phone"]);
            myDic.Add("IdCard", Request["IdCard"]);
            myDic.Add("IdCardPos", DicInfo["ImagePath"]);
            myDic.Add("IdCardNeg", DicInfo2["ImagePath"]);
            myDic.Add("Status", Convert.ToString("1"));
            #endregion

            #region 添加數據到數據庫                
            bool res = collegeService.AddBaseInfo1(myDic);
            if (res == false)
            {
                return Content("fail");
            }
            #endregion
            return Content("ok");
        }
        #region 上傳圖片
        private Dictionary<string, string> UploadImg(HttpPostedFileBase file, string dir)
        {
            string Image_Path = null;          //保存的文件
            Dictionary<string, string> DicInfo = new Dictionary<string, string>();  //返回的文件信息
     
            //判斷上傳文件的類型
            string fileName = Path.GetFileName(file.FileName); //獲取文件名
            string fileExt = Path.GetExtension(fileName);      //獲取擴展名

            if (fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".png")
            {
                //建立文件夾
                Directory.CreateDirectory(Path.GetDirectoryName(Request.MapPath(dir)));
                //須要對上傳的文件進行重命名
                string newfileName = Guid.NewGuid().ToString();
                //構建文件完整路徑
                string fullDir = dir + newfileName + fileExt;
                file.SaveAs(Request.MapPath(fullDir));  //保存文件  
                //將上傳成功的圖片的路徑存到數據庫中
                Image_Path = newfileName + fileExt;
                DicInfo.Add("ImagePath", Image_Path);
                DicInfo.Add("Result","1");
            }
            else
            {
                DicInfo.Add("ImagePath", "");
                DicInfo.Add("Result", "0");
            }
            return DicInfo;
        }
        #endregion