在 mvc 应用程序中上传 Ajax 文件答案

【问题标题】：Ajax file upload in mvc application在 mvc 应用程序中上传 Ajax 文件
【发布时间】：2012-09-08 13:44:29
【问题描述】：

在我的 MVC 应用程序中，我在这部分代码中使用 Ajax 上传（版本 3.5 (23.06.2009)）：

<div id="userPhotosUpload">
   <span class="tabs_fieldDesc">@Html.Label("txtPhotoDescription", "Desc")</span>
    @Html.TextBox("txtPhotoDescription", "", new { @maxlength = "30", @class = "tabs_fullLength" })              
    <div class="buttonLine">
       <button id="btnAddUserPhoto">Add picture</button>
    </div>
    <input id="txtSelectedPhotoFolderId" type="hidden" value="" />
</div>
<script type="text/javascript">
$(document).ready(function () {
//photo upload
var photoUpload = new AjaxUpload($('#btnAddUserPhoto'), {
    action: '/Profile/ProcessPhoto',
    name: 'uploadfile',
    responseType: 'json',
    autoSubmit: true,
    onSubmit: function (file, ext) {
        showProgressBar();
        photoUpload.setData({
            photoDescription: $('#txtPhotoDescription').val(),
            idPhotoFolder: $('#txtSelectedPhotoFolderId').val()
        });
    },
    onComplete: function (file, response) {
        hideProgressBar();
        $('#txtPhotoDescription').val('');
        var currentSelectedFolderId = getSelectedFolder();
        LoadPhotoFolders();
        SelectPhotoFolder(currentSelectedFolderId);
    }
});
</script>

如果我上传大于 1MB 的文件，AjaxUpload 不会在控制器中调用方法：

[Authorize]
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public JsonResult ProcessPhoto(string photoDescription, Int64 idPhotoFolder)
{
    //process request with file
}

和Fiddler2 给我看这个：

POST /Profile/AddUserPhoto HTTP/1.1 主机：localhost:55538 用户代理： Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0 接受： text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 接受语言：cs,en-us;q=0.7,en;q=0.3 接受编码：gzip，放气连接：保持活动引用：曲奇饼： AspxAutoDetectCookieSupport=1； .ASPXAUTH = AB45C67E90AD19402C47818CC4BC78504C96F6BB063E07F89E918F22D3A42B441B14B57818448BAAD3ABEEED48C1EA41431C89F149B3BA53D59950694F33C447462EE56AC33CFB54F1ADAC7B7A4F5D69F6ED3855A649F217EDC56B2250E6BFC87052C0640C1C191F212A76B3A9D9973609F6E537992BBADBC1A3F97853A8B90485DE9C11819D54D1F0D0F9838EDAE73E; ASP.NET_SessionId=gflyfmea2ty2gm3i4rea2adx 内容类型：多部分/表单数据；边界=-------------481414423196 内容长度：6046387

-----------------481414423196 内容处置：表单数据；名称="照片描述"

-----------------481414423196 内容处置：表单数据； name="idPhotoFolder"

136 --------------------------481414423196 内容处置：表单数据；名称="上传文件";文件名="sam_1103.jpg" 内容类型：图片/JPEG

HTTP/1.1 504 Fiddler - 接收失败 Content-Type: text/html; charset=UTF-8 连接：关闭时间戳：15:30:34.321

[Fiddler] ReadResponse() 失败：服务器没有返回响应为这个请求。

知道问题出在哪里？

谢谢

【问题讨论】：

标签： c# asp.net-mvc jquery ajax-upload

【解决方案1】：

服务器似乎没有响应（Http 504）。

方法ProcessPhoto 是否被调用？

如果没有，那么您可能应该查看一下您的 .config 设置。您还可以在不启用提琴手的情况下检查 ajax onComplete 方法中的服务器响应。

如果您的服务器 ProcessPhoto 方法确实被调用，错误是否同时发生在本地 Web 服务器和远程 Web 服务器上（最好消除任何其他可能的超时来源）。

最后，如果您的方法被调用，是否可能是您的照片处理而不是网络服务器通信实际上很慢？最后一个是我最初的猜测，但如果有更多信息会很好:-)

无论如何，只是一些想法:-)

【讨论】：