Ajax에서 HttpPostedFileBase 및 FormCollection 전달하기

Question

저는 이전 계약자가 우리 사이트 내의 첨부 영역이있는 프로젝트에서 작업하고 있습니다. 이 부분은 대부분 작동하지만 파일을 업로드 한 후 다시 리디렉션 할 때 문제가 발생합니다. 또한 업로드 된 파일을 표시하기 위해 그리드를 업데이트하기 위해 페이지가 전체 페이지를 다시로드한다는 사실을 좋아하지 않습니다.

제 목표는 업로드 대 양식 제출 대신 Ajax 호출을하는 것입니다. 나는 이것을 추가했다. 그러나 반환은 IE 11을 사용하여 Json 객체를 강제로 다운로드한다. 이 문제를 해결하는 방법을 연구했으며 아직 해결 방법이 부족합니다.

Ajax를 사용하여 파일을 업로드하고 Json 객체의 다운로드를 되돌릴 수 있습니까?

아래 코드는 제 코드입니다.

보기 (Upload.cshtml)

@using (Html.BeginForm("Upload", "PM", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmUpload" })) 
{ 
    @Html.ValidationSummary(true) 
    <table> 
     ... 
     <tr> 
      <td>@Html.Label("File: ")</td> 
      <td> 
      <input type="file" name="file" id="file"/> 
      @Html.ValidationMessage("file","File is required") 
      </td> 
     </tr> 
     ... 

     <tr> 
      <td colspan="2"> 
      <p> 
       <button type="submit" class="t-button" id="btnSubmit"> 
        Attach</button> 
       <button type="button" class="t-button" onclick="CloseAttachmentWindow()"> 
        Cancel</button> 
      </p> 
     </td> 
     </tr> 
    </table>  
} 

<script type="text/javascript"> 
    $(document).ready(function() {   
    $("#btnSubmit").click(function (e) { 
     e.preventDefault(); 

     if (!$('form').valid()) 
      return false; 

     //Upload document 
     $.ajax({ 
      type: "POST", 
      cache: false, 
      url: "/PM/Upload", 
      dataType: "json", 
      contentType: false, 
      processData: false, 
      data: $('form').serialize(), 
      success: function (result) { 
       if (result.success) { 
        var window = $("#error").data("tWindow"); 
        window.content("<b>Attachment successfully added</b>").title("Success!"); 
        window.center().open(); 

        CloseAttachmentWindow(); 
       } 
       else { 
        var window = $("#error").data("tWindow"); 
        window.content("<b>Error: Unable to Upload Document. Please try again. " 
             + "If this fails, contact the administrators with the below details.</b>" 
             + '\n' + '\n' + result.Error).title("Error"); 
        window.center().open(); 
       } 
      }, 
      error: function (xhtr, e, e2) { 
       var window = $("#error").data("tWindow"); 
       window.content(e + '\n' + xhtr.responseText, 'error', ''); 
       window.center().open(); 
      } 
     }); 
    }); 
    }); 
</script> 

PMController.cs 그대로

[HttpPost] 
public ActionResult Upload(HttpPostedFileBase file, FormCollection formcollection) 
{ 
     if (file != null) 
     { 
      var cntPOC = int.Parse(Session["cntPOC"].ToString()); 
      try 
      { 
       var cntFileType = _fileTypeRepo.GetCntFileTypeByMimeType(file.ContentType); 
       if (cntFileType == 0) 
        throw new Exception("This file type is not supported"); 

       var strAttachmentName = formcollection["AttachmentName"]; 
       var strAttachmentType = formcollection["AttachmentType"]; 

       var length = file.ContentLength; 
       var tmpFile = new byte[length]; 

       if (tmpFile.Count() > 0) 
       { 
        file.InputStream.Read(tmpFile, 0, length); 
        var intAttchmentId = _AttachRepo.GetNextAttachmentId() + 1; 

        var objAttachment = new TBLATTACHMENT 
        { 
         CNTATTACHMENT = intAttchmentId, 
         CNTPOC = cntPOC, 
         CNTFILETYPE = cntFileType, 
         CNTATTACHMENTTYPE = Convert.ToDecimal(strAttachmentType), 
         DTMCREATED = DateTime.Now, 
         STRATTACHMENTTITLE = strAttachmentName, 
         BLBATTACHMENT = tmpFile, 
         STRORIGINALFILENAME = file.FileName, 
         YSNDELETED = 0 
        }; 

        _AttachRepo.Add(objAttachment); 
        _AttachRepo.Save(); 

        return Json(new { success = true, Error = "" }); 
       } 
       //File not real 
       else 
        return Json(new { success = false, Error = "Please select appropriate file" }); 
      } 
      catch (Exception ex) 
      { 
       logger.LogError("File Upload", ex); 

       if (ex.InnerException != null) 
        ModelState.AddModelError("Error", ex.InnerException.ToString()); 
       else 
        ModelState.AddModelError("Error", ex.Message.ToString()); 

       TempData["ModelState"] = ModelState; 

       return Json(new { success = false, Error = ex.Message }); 
      } 
     } 
     else 
     { 
      logger.LogError("File Upload Error. File was not selected"); 
      ModelState.AddModelError("Error", "Please select file"); 
      TempData["ModelState"] = ModelState; 

      return Json(new { success = false, Error = "File was not selected" }); 
     } 
} 

,이 코드를 사용하여, 나는 문서를 업로드 할 수 있습니다, 그러나, 나는 JSON 개체를 다운로드 프롬프트 수 돌아올 때.

Answer 1

옵션 :

• 제거 버튼 타입 버튼 <input type="button"/>
• <input type="submit" onclick="return false">

• return false;에 제출하거나 추가 이벤트 핸들러 변경

  $("input[type='submit']").click(function() { return false; }); 또는 $("form").submit(function() { return false; });

• <form onsubmit="return false"> ...</form> 은 onclick이 할당 된 경우에도 모든 "버튼"에서 새로 고침을 방지합니다.

제출 유형을 버튼으로 변경하는 것이 가장 좋습니다.