0

我有一个视图，用户可以在其中编辑他的个人资料信息。这是输入文本字段，他还可以添加个人资料图像。为此，我使用带有剃须刀的 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();
});

但问题仍然存在......我将不胜感激有关此问题的任何帮助。

4

1 回答 1

0

不知道您为什么要以您的方式处理图像上传表格。您的视图中只能有两种形式。我们正在这样做，没有任何问题。只要确保每个表单都包含它需要数据的所有元素。要在两种形式中使用一个元素，请进行隐藏输入以镜像另一个，并使用 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)

这样您就可以在单击保存图片按钮时保存文件对象。我不能保证这会奏效，但我相当肯定。

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

我希望这是有道理的。

于 2012-09-18T16:03:02.517 回答