Question

我正在尝试为我的网站做一个简单的图片上传器。

想法是将图像文件发布到服务器，服务器返回包含URL的json。然后我使用JQuery用url更新p标签。

这是我的行动方法：

[HttpPost]
public JsonResult UploadImage()
{
    var image = WebImage.GetImageFromRequest();
    var filename = image.FileName;

    image.Save(Path.Combine("../Content/Images",filename));

    return Json( new{ url= "http://www.example.com/Content/Images/"+filename)} );

}

这是我的脚本标记视图代码。（Jquery在我的布局页面中链接）

上传图片

@using (Ajax.BeginForm("UploadImage", "Gtfo", FormMethod.Post, new AjaxOptions
        {
            HttpMethod = "post",
            UpdateTargetId = "filePath",
            InsertionMode = InsertionMode.InsertAfter,
            OnSuccess = "updateFilePath"
        }, new
        {
            enctype = "multipart/form-data"
        }))
{
    <input type="file" name="imageUploader" /><br />
    <input type="submit" name="Submit" id="Submit" value="Upload" />
}


<script type="text/javascript">

    function updateFilePath(result) {

        $("#filePath").text(result.url);
    }
</script>

图像正在上传并保存到服务器中。问题是，一旦上传图像，浏览器就会重定向到以纯文本显示JSON数据的页面。

编辑：我已经在互联网上做了一些阅读，我认为问题可能是我没有在我的布局页面上包含不显眼的JavaScript。我已经将脚本添加到我的布局页面。现在，服务器不是将图像上传到我的服务器，而是在var filename = image.FileName;处抛出异常。原因是因为image现在为空。在包含不引人注目的javascript之前没有发生这种情况。我不确定这是前进还是后退。

Answer 1

您需要包含以下所有脚本：

jquery.unobtrusive-ajax.js
<击> MicrosoftMvcAjax.js

我能够在测试项目中复制您的问题，并且包括这两个脚本解决了这个问题。

修改

经过更多测试后，实际上不需要MicrosoftMvcAjax。我在布局页面顶部需要的两个脚本是jquery和jquery.unobtrusive-ajax.js

Answer 2

试

@using (Ajax.BeginForm("UploadImage", 
                       "Gtfo",
                       new AjaxOptions {
                         HttpMethod = "post",
                         UpdateTargetId = "filePath",
                         InsertionMode = InsertionMode.InsertAfter,
                         OnSuccess = "updateFilePath"
                       },
                       new { enctype = "multipart/form-data"
                       }))

为什么我的json会在新页面中呈现？

2 个答案: