我目前正在使用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

解决方法

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

使用text / plain也存在一个特定的问题,因为浏览器可能会内容嗅探它,并且如果在数据中看起来像HTML标记,则将资源视为HTML.如果您的JSON返回其中包含用户提供的数据,则可能允许某人将可执行JavaScript注入您的站点(XSS攻击).

正如ajaxForm doc所建议的,你应该检测到来自iframe帖子而不是AJAX的调用,并在这种情况下返回带有textarea包装器的text / html响应:

To account for the challenges of script and JSON responses when using the iframe mode,the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers.

javascript – IE iframe无法正确处理应用程序/ json响应的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. 详解Html5页面实现下载文件(apk、txt等)的三种方式

    这篇文章主要介绍了详解Html5页面实现下载文件(apk、txt等)的三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 基于HTML十秒做出淘宝页面

    十分钟做出一个网页,看似不可思议,下面小编给大家带来了基于HTML十秒做出淘宝页面,只分为两步,代码超级简单,需要的朋友参考下吧

  7. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  8. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. 跨域修改iframe页面内容详解

    这篇文章主要介绍了跨域修改iframe页面内容详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. 使用postMessage让 iframe自适应高度的方法示例

    这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部