6

我目前正在使用 ASP.NET Web API 将 ASP.NET MVC 网站的某些部分升级为更加 RESTful。我们正在转向更加 RESTful 设计的功能之一是文件上传。对于客户端，我们使用 jquery 插件ajaxForm来包装 iframe 的创建，该 iframe 将提交包含文件输入元素的表单。这与 ASP.NET MVC 配合得很好。

当将其更改为使用我们的 Web API 端点时，该端点返回一个 Content-Type 为“application/json”的响应，我们注意到 Internet Explorer 9 存在问题。似乎从未调用 ajaxForm 成功函数。据我所知，IE 中的 iframe 似乎将 Content-Type 为“application/json”的响应正文解释为要下载的文件附件。这意味着它永远不会触发 iframe 的“加载”事件，这意味着永远不会触发 ajaxForm onload 事件处理程序，并且永远不会调用我们的 ajaxForm 成功函数。

我们在 IE 7 中也注意到了这个问题，但我们无法在 Firefox 或 Chrome 的最新版本中重现该问题，即使强制它们使用 iframe 而不是带有 FormData 的 File API。

为了暂时解决这个问题，我现在强制响应 Content-Type 回到“text/plain”，这是我们之前从处理文件上传的 ASP.NET MVC 控制器操作返回的内容。这使一切再次正常工作。

我的问题：

  • 有没有办法可以将 Web API 响应 Content-Type 保持为“application/json”并让 IE 正确解释它？
  • 使用 IE 和 Web API 时是否有更好的文件上传方式？也许是不同的插件或更好的技术？

附加限制：我不能在这个网站上使用 ActiveX 或 Flash。我可以使用不同的插件，但前提是它具有一般的跨浏览器支持。（IE、Chrome、Firefox、Safari 等）

我的 HTML：

<form id="uploadFormId" action="" method="post" enctype="multipart/form-data" encoding="multipart/form-data">
    <input type="file" name="files[]"/>
</form>

我的JavaScript：

function onFileChange( e ) {
    if ( e.type === e.originalEvent.type ) {
        var filePath = $( e.currentTarget ).val();
        if ( filePath !== '' ) {
            $( this ).closest( 'form' ).submit();
        }
    }
};

$( function() {
    $( '#uploadFormId' ).ajaxForm( {
        url: "api/Files/1234",
        dataType: 'json',
        success: function ( response ) { 
            alert( response );
        },
        error: function ( xhr, status, error ) { 
            alert( status );
        }
    } );
    $( '#uploadFormId input[type="file"]' ).bind( 'change', onFileChange );
});

“application/json”响应标头（在 IE 中不起作用）：

Cache-Control:no-cache
Content-Length:337
Content-Type:application/json; charset=utf-8
Date:Wed, 17 Jul 2013 13:10:47 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

“text/plain”响应标头（在 IE 中工作）：

Cache-Control:no-cache
Content-Length:322
Content-Type:text/plain
Date:Wed, 17 Jul 2013 13:17:24 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
4

1 回答 1

10

当 ajaxForm 使用 iframe 提交模式时，调用的响应必然呈现在 iframe 的正文中。这意味着它必须是浏览器可以呈现的内容类型——通常是 HTML，但text/plain也可以正常工作。但是浏览器无法呈现application/json为页面。

使用也有一个特定的问题text/plain，因为浏览器可能会对其进行内容嗅探，如果数据中存在看起来像 HTML 标记的内容，则将资源视为 HTML。如果您的 JSON 中包含用户提供的数据，则可能允许有人将可执行的 JavaScript 注入您的站点（XSS 攻击）。

正如ajaxForm 文档所建议的那样，您应该检测到调用何时来自 iframe 帖子而不是 AJAX，并text/html在这种情况下返回带有 textarea 包装器的响应：

为了解决使用 iframe 模式时脚本和 JSON 响应的挑战，Form Plugin 允许将这些响应嵌入到 textarea 元素中，建议您在与文件上传和旧版本结合使用时对这些响应类型这样做浏览器。

于 2013-07-17T14:29:13.223 回答