Question

我有一个帐户页面，用户可以在其中更新他/她的个人资料图片。我使用Amazon S3存储图像，因此上传成功后，我将返回图像URL，以使用该URL的值填充图像src和TextBoxFor。但是，当我提交表单时，提交到POST的模型仍然包含桌面文件名而不是Amazon S3 URL。

这是我的ajax调用（成功后）填充一个img字段和一个TextBoxFor字段：

$.ajax
        ({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/Account/UploadProfImageToS3Return",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (data) {
                $("#profile-image").attr("src", data);
                $("#profImage").attr("value", data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //TODO: Indicate Error
                console.log(jqXHR);
            }
        });
        });

这是我的Html.BeginForm：

 @using (Html.BeginForm("General", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
       <img id="profile-image" src="@Model.Artist.ImageURL" alt="Profile Image" />

       @Html.TextBoxFor(m => m.Artist.ImageURL, new { @name = "profImage", @id = "profImage", @type = "file" })

        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-default btn-form" />
        </div>
}

文件添加到@Html.TextBoxFor(m => m.Artist.ImageURL, new { @name = "profImage", @id = "profImage", @type = "file" })

时

称为：20507471_10214.jpg，文件上传后，该TextboxFor的值现在为https://s3.amazonaws.com/unlink/profile-picture/xxxxxxx.jpg（因为在AJAX成功后我会更新该字段）

但是当我在此处在POST上设置断点时：

[HttpPost]
public ActionResult General(Artist artist)

我检查了artist.ImageURL仍然等于20507471_10214.jpg

该如何解决？

编辑，以图像证明每个值/ src属性的设置正确：

Answer 1

好吧，所以一种解决方法是不使用：

@Html.TextBoxFor(m => m.Artist.ImageURL, new { @name = "profImage", @id = "profImage", @type = "file" })

而是使用类似的方法，将其与隐藏的表单元素绑定到commit ... odd上的值，但可以：

<input name="profImage" id="profImage" type="file" />
@Html.HiddenFor(m => m.Artist.ImageURL)

在AJAX成功后，我将S3 URL值分配给隐藏表单：

$("#Artist_ImageURL").attr("value", data);

Answer 2

尝试将接收自Amazon S3的新图像URL添加到formData中

$.ajax
    ({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Account/UploadProfImageToS3Return",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (data) {
            $("#profile-image").attr("src", data);
            $("#profImage").attr("value", data);

            //imageUrl corresponds to the Artist model property.
            formData.append("imageUrl",data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //TODO: Indicate Error
            console.log(jqXHR);
        }
    });
});

Answer 3

首先，如果您使用的是Chrome浏览器，请务必小心，Chrome浏览器请勿立即更新css和JS文件，我建议您使用firefox进行开发。

也许，当您编辑“名称”标签时，您可能会编辑一些行为，而这不是MVC等待响应的方式，您可以尝试删除¨@ name =“ profImage”？部分，然后检查行为< / p>

使用jQuery设置Html.TextBoxFor值未反映在Model POST中

3 个答案: