Question

所以我有部分ajax文件上传（使用Jquery Form插件），它运行正常，但我不知道在文件上传后更新模型值

<div>
   @Html.Partial("PhotoUpload", Model.Place)
</div>

我在这里呼叫部分并将其作为模型的一部分。

@model PlaceMap.DAL.Entities.Place
@using (Html.BeginForm("PhotoUpload", "Place", FormMethod.Post, new { @id = "photoUpload", enctype = "multipart/form-data" }))
{
    {
        @Html.ValidationSummary(true, "Image upload was unsuccessful")
        @Html.HiddenFor(m => m.Photo)                                                                                                                                                                                  
        <input type="file" id="file" name="file"/>
        <input type="submit" id="sbm" />
    }
}

这是部分，接受模型和上传表单的视图代码

var options = {
    url: "/Place/PhotoUpload",
    dataType: "json",
    clearForm: true,
    resetForm: true,
    success: showResponse
};

function showResponse(responseText, statusText, xhr, $form)
{
    $('#photo').append('<img src="/Images/Places/' + responseText.Photo + '" />');
}

$('#photoUpload').submit(function ()
{
    $('#photoUpload').ajaxSubmit(options);
    return false;
});

插件的Javascript代码

    [Authorize]
    [HttpPost]
    public ActionResult PhotoUpload(string Photo, HttpPostedFileBase file)
    {
        try
        {
            using (var ms = new MemoryStream())
            {
                //some logic here
                return Json(new { Photo = filename });
            }

        }
        catch (ArgumentException)
        {

        }

        return PartialView();
    }

控制器动作代码。它返回了文件名，它将转到js function＆＃34; showResponse＆＃34;并将图像附加到div。它完全可以正常工作，但我必须将文件名写入@ Model.Photo这个部分，我不知道该怎么做。有什么建议吗？

Answer 1

一种可能性是使用服务器中的text/plain：

return Json(new { Photo = filename }, "text/plain");

并在客户端上手动解析：

function showResponse(responseText, statusText, xhr, $form) {
    var data = $.parseJSON(responseText);
    $('#photo').append('<img src="/Images/Places/' + data.Photo + '" />');
}

显然，您需要删除dataType: 'json'选项才能使其正常工作。

另一种可能性是遵循documentation中解释的内容并编写自定义操作结果，该结果将使用<textarea>标记包装您的JSON响应：

支持XMLHttpRequest Level 2的浏览器将能够   无缝上传文件，甚至可以在上传时获得进度更新   收益。对于旧版浏览器，使用了后备技术   涉及iframe，因为无法使用。上传文件   XMLHttpRequest对象的第1级implmentntation。这是常见的   后备技术，但它有固有的局限性。 iframe   element用作表单提交操作的目标   表示服务器响应被写入iframe。这可以   如果响应类型是HTML或XML，但如果响应类型不正常   响应类型是脚本或JSON，两者通常都包含   需要在使用实体引用时重复的字符   在HTML标记中找到。

在使用时考虑脚本和JSON响应的挑战   在iframe模式下，Form Plugin允许嵌入这些响应   在textarea元素中，建议您这样做   与文件上传和旧版本结合使用时的响应类型   浏览器。但请注意，如果没有文件输入   然后请求使用普通的XHR提交表单（不是   IFRAME）。这会使您的服务器代码负担知道何时使用   textarea和什么时候不。如果您愿意，可以使用iframe选项   插件强制它总是使用iframe模式，然后你的   服务器始终可以将响应嵌入到textarea中。但是   推荐的解决方案是测试'X-Requested-With'请求   头。如果该标头的值是'XMLHttpRequest'，那么你知道   该表格是通过ajax发布的。

如何在ajax文件上传后从partial更新模型？

1 个答案: