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

这很好用。问题是如果用户将图像添加到他的个人资料中，那么

<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"];

然后，我只有一个switch（submitCommand）块，我在那里执行按钮的相应操作。在您的情况下，您必须制作动作签名：

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

以便在单击保存图片按钮时保存文件对象。我不能保证这会奏效，但我很确定。

如果没有，那么丑陋的解决方法是获取用于上传从表单中分离的图片的表单以更新配置文件。这不会很漂亮......尽管你可以通过将图像形式放在一个对话框中（在main之外）并用jQuery对话框打开它来完成它。

我希望这是有道理的。

文件上传后表单不提交

1 个答案: