表單不會在文件上傳後提交

Question

我有一個視圖，用戶可以編輯他的個人資料信息。這裏是輸入文本字段，他還可以添加個人資料圖片。要做到這一點，我做了以下使用剃刀ASP .NET MVC3如下：

在查看：

@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局部視圖來處理圖像：

<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> 

隨着這些腳本：

<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(""); 
} 

這工作正常。問題是，如果用戶將圖像添加到他的個人資料中，那麼按鈕不會執行任何操作。但是，如果用戶在不添加圖像的情況下編輯他的個人資料，輸入按鈕就會按照它的方式提交。我試着用結合

$(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) 

，這樣你將有文件對象是點擊保存圖像按鈕時保存。我不能保證這會起作用，但我確信。

如果沒有，那麼醜陋的解決方法是獲取上傳用於更新配置文件的表單上分離的圖片。這並不會很漂亮......雖然你可以通過將圖像形式放在一個對話框中（在主體之外）並用jQuery對話框打開它來完成它。

我希望這是有道理的。