1

所以我有 ajax 文件上传部分（使用Jquery Form插件），它工作得很好，但我不知道在文件上传后更新模型值

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

在这里，我称其为 partial 并将其作为模型的一部分。

@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 函数“showResponse”并将图像附加到 div。这一切都很好，但我必须将文件名写入这个部分的@Model.Photo，我不知道该怎么做。有什么建议么？

4

1 回答 1

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'选项。

另一种可能性是遵循文档中的说明<textarea>并编写自定义操作结果，该结果将使用标签包装您的 JSON 响应：

支持 XMLHttpRequest Level 2 的浏览器将能够无缝上传文件，甚至在上传过程中获得进度更新。对于较旧的浏览器，使用涉及 iframe 的后备技术，因为无法使用 XMLHttpRequest 对象的 1 级实现来上传文件。这是一种常见的后备技术，但它具有固有的局限性。iframe 元素用作表单提交操作的目标，这意味着将服务器响应写入 iframe。如果响应类型是 HTML 或 XML，这很好，但如果响应类型是脚本或 JSON，则效果不佳，这两种类型通常都包含在 HTML 标记中找到时需要使用实体引用来表示的字符。

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

于 2012-05-14T12:36:06.990 回答