使用 iframe 文件上传时如何处理 HTTP 错误响应？

Question

我正在使用以下肮脏的解决方法代码来模拟 ajax 文件上传。这很好用，但是当我在 web.config 中设置 maxAllowedContentLength 时，我的 iframe 会“正常”加载，但内容会显示一条错误消息：

dataAccess.submitAjaxPostFileRequest = function (completeFunction) {
    $("#userProfileForm").get(0).setAttribute("action", $.acme.resource.links.editProfilePictureUrl); 
    var hasUploaded = false;
    function uploadImageComplete() {
        if (hasUploaded === true) {
            return;
        }
        var responseObject = JSON.parse($("#upload_iframe").contents().find("pre")[0].innerText);
        completeFunction(responseObject);
        hasUploaded = true;
    }
    $("#upload_iframe").load(function() {
        uploadImageComplete();
    });
    $("#userProfileForm")[0].submit();
};

在我的 Chrome 控制台中，我可以看到

POST http://acmeHost:57810/Profile/UploadProfilePicture/ 404（不是 找到）

我更愿意在我的代码中检测到这个错误响应，而不是解析 iframe 内容并猜测存在错误的风险业务。对于“closer-to-homeerrors, I have code that sends a json response, but formaxAllowedContentLength”，IIS 在我的代码被命中之前很久就发送了 404.13。

Answer 1

如果您无法控制错误，您将无能为力。如果提交目标与提交者在同一个域中，并且您不受 SOP 限制，您可以尝试访问 iframe 的内容并确定它是显示成功消息还是错误消息。然而，这是一个非常糟糕的策略。

为什么是 IFRAME？这是一种痛苦。

如果你想上传文件而不是页面滑动或过渡，你可以使用JS文件API：File API File Upload - Read XMLHttpRequest in ASP.NET MVC

支持很好：http://caniuse.com/#feat=filereader

对于不支持 File API 的旧浏览器，只需提供普通形式的 POST。不漂亮......但对于旧浏览器来说还可以。

更新

由于您没有机会使用该 API... 多年前我处于同样的情况，结果并不简单。基本上，我创建了一个上传票证系统，用于上传您必须上传的文件：

• 从 POST /newupload/ 创建一个票证，这将返回一个 GUID。
• 为/newupload/dialog/<guid> 创建一个iframe，显示指向POST /newupload/<guid>/file 的文件提交表单
• 在GET /newupload/guid/status 处提供上传状态
• 每 500 毫秒从提交者（iframe 外部容器）检查上传状态。
• 开始上传时，隐藏 iframe 或显示一些花哨的东西，如无尽的进度条。
• 当上传操作完成失败时，删除 iframe 并让用户知道它是如何进行的。

当我转向 FileReader API 时……是美好的一天。