파일 업로드 후 양식이 제출되지 않습니다.

Question

사용자가 자신의 프로필 정보를 수정할 수있는보기가 있습니다. 다음은 입력 텍스트 필드이며 프로필 이미지를 추가 할 수도 있습니다. 이렇게하려면 내가했던 다음과 같이 면도칼로 ASP .NET MVC3를 사용하여 다음보기에서

:

<div class="floatRight" > 
    <a onclick="javascript:opendialogbox('imageLoad2');" style="cursor: pointer">Foto</a> 
    <img src="../../Content/themes/base/images/icons/zoom.png" width="16" height="16" id="imgThumbnail2" alt="foto" /> 
    <input type="file" name="imageLoad2" accept="image/*" id="imageLoad2" onchange="ChangeProfileImage()" hidden="hidden" /> 
</div> 

으로 :

@using (Html.BeginForm("SettingsWizard", "Business", FormMethod.Post, new { enctype = "multipart/form-data", id="SettingsForm" })) 
     { 

      @Html.Partial("_UsrConfiguration", Model) 

      @Html.Partial("_OtherPartialView") 

      @Html.Partial("_OtherPartialViewTwo") 


      <p class="textAlignRight"> 
       <input type="submit" class="bb-140" id="button7" value="Save"/> 
    </p> 
      <div class="clear"></div> 
     } 

_UsrConfiguration 부분보기에서이 이미지를 처리하기 위해 이러한 스크립트 :

<script type="text/javascript"> 
function ChangeProfileImage() { 
     var ext = document.getElementById('imageLoad2').value.match(/\.(.+)$/)[1]; 
     switch (ext.toLowerCase()) { 
      case 'jpg': 
      case 'bmp': 
      case 'png': 
      case 'gif': 
      case 'jpeg': 
       { 
        var myform = document.createElement("form"); 
        myform.style.display = "none"; 
        myform.action = "/ImagePreview/ProfileImageSubmit"; 
        myform.enctype = "multipart/form-data"; 
        myform.method = "post"; 
        var imageLoad; 
        var imageLoadParent; 
        var is_chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
        if (is_chrome && document.getElementById('imageLoad2').value == '') 
         return; //Chrome bug onchange cancel 
        if (document.all || is_chrome) {//IE 
         imageLoad = document.getElementById('imageLoad2'); 
         imageLoadParent = document.getElementById('imageLoad2').parentNode; 
         myform.appendChild(imageLoad); 
         document.body.appendChild(myform); 
        } 
        else {//FF 
         imageLoad = document.getElementById('imageLoad2').cloneNode(true); 
         myform.appendChild(imageLoad); 
         document.body.appendChild(myform); 
        } 
        $(myform).ajaxSubmit({ success: 
         function (responseText) { 
          var d = new Date(); 
          $("#imgThumbnail2")[0].src = "/ImagePreview/ProfileImageLoad?a=" + d.getMilliseconds(); 
          if (document.all || is_chrome)//IE 
           imageLoadParent.appendChild(myform.firstChild); 
          else//FF      
           document.body.removeChild(myform); 
         } 
        }); 
       } 
       break; 
      default: 
       alert('File type error…'); 
     } 

    } 
</script> 

이미지를 처리 ​​할 컨트롤러 쪽에서 :

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult ProfileImageSubmit(int? id) 
{ 
Session["ContentLength"] = Request.Files[0].ContentLength; 
     Session["ContentType"] = Request.Files[0].ContentType; 
     byte[] b = new byte[Request.Files[0].ContentLength]; 
     Request.Files[0].InputStream.Read(b, 0, Request.Files[0].ContentLength); 
     //DB saving logic and persist data with… 
    repo.Save(); 

     return Content(Request.Files[0].ContentType + ";" + Request.Files[0].ContentLength); 
} 

public ActionResult ProfileImageLoad(int? id) 
{ 

    TCustomer usr = new TCustomer(); 
     usr = repo.load(User.Identity.Name); 
byte[] b = usr.ContactPhoto; 
     string type = (string)Session["ContentType"]; 
    Response.Buffer = true; 
     Response.Charset = ""; 
     Response.Cache.SetCacheability(HttpCacheability.NoCache); 
     Response.ContentType = type; 
     Response.BinaryWrite(b); 
     Response.Flush(); 
     Response.End(); 
     Session["ContentLength"] = null; 
     Session["ContentType"] = null; 
     return Content(""); 
} 

잘 작동합니다. 문제는 사용자가 프로필에 이미지를 추가하면

<input type="submit" class="bb-140" id="button7" value="Save"/> 

버튼이 아무 것도하지 않는다는 것입니다. 그러나 사용자가 이미지를 추가하지 않고 자신의 프로파일을 편집하면 입력 버튼이 원하는 방식으로 제출됩니다. 나는

$(document).on('click','#button7',function(e){ 
    $("#SettingsForm").submit(); 
}); 

를 사용하여 입력의 클릭 기능을 결합하려고하지만 문제는 내가이 문제에 어떤 도움을 부탁드립니다 ... 을 지속.

Answer 1

이미지 업로드 양식을 왜 사용자가 취급하는지 확신 할 수 없습니다. 보기에는 두 가지 형식 만있을 수 있습니다. 우리는 아무 문제없이 그것을하고 있습니다. 각 양식에 데이터가 필요한 모든 요소가 포함되어 있는지 확인하십시오. 양쪽 폼에서 하나의 요소를 사용하려면 숨겨진 입력을 만들어 다른 것을 미러링하고 jQuery를 사용하여 값을 최신 상태로 유지하십시오.

음 ... 문제를보기 시작했습니다. 당신이 배치 한 것들을 가지고있는 방식, 내가 제안한 두 번째 형식은 원래 형태 안에 중첩 될 것입니다. 나는 같은 양식에 여러 제출 버튼이있는 해결 방법이있는 곳이 있습니다. 버튼은 다음과 같이 :

내 행동 그리고

<input type="submit" value=" Save Changes " name="submitButton" /> 

, 나는이 서명 사용

[HttpPost] 
    public ActionResult ProcessForm(FormCollection collection) 

와 함께 클릭 한 어떤 버튼을 찾을 :

string submitCommand = collection["submitButton"]; 

다음, 나는 단지 스위치 (submitCommand) 블록이 있는데 여기에서 버튼에 대한 적절한 작업을 수행합니다. 당신이 그림 저장 버튼을 클릭 할 때 저장하는 파일 객체를했을 정도로

[HttpPost] 
    public ActionResult ProcessForm(FormCollection collection, HttpPostedFileBase file) 

: 귀하의 경우에, 당신은 작업 서명을해야합니다. 나는 이것이 효과가 있다는 것을 보장 할 수는 없지만, 나는 꽤 확신한다.

만약 그렇지 않다면, 추악한 해결 방법은 프로필을 업데이트하기 위해 양식에서 분리 된 그림을 업로드하기위한 양식을 얻는 것입니다. 그것은 꽤 좋지 않을 것입니다 ... 대화 상자 (main의 바깥 쪽)에 이미지 양식을 놓고 jQuery 대화 상자로 이미지 양식을 열면 완료 될 수 있습니다.

나는 이것이 의미가 있기를 바랍니다.