表单不会在文件上传后提交

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对话框打开它来完成它。

我希望这是有道理的。