javascript - IE iframe doesn't handle application/json response properly -

i upgrading parts of asp.net mvc website more restful, using asp.net web api. 1 of features moving more restful design file upload. client, using jquery plugin, ajaxform, wrap creation of iframe submit form containing file input element. working great asp.net mvc.

when changing use our web api endpoint, returns response content-type of "application/json", noticed problems internet explorer 9. appears ajaxform success function never called. can tell, appears iframe in ie interprets body of response content-type of "application/json" file attachment downloaded. means never fires iframe's "loaded" event, means ajaxform onload event handler never triggered, , our ajaxform success function never called.

we noticed issue in ie 7 well, not recreate issue in latest release versions of firefox or chrome, when forcing them use iframe rather file api formdata.

to resolve issue now, forcing response content-type "text/plain", returning asp.net mvc controller actions handled file upload. makes work again.

my questions:

• is there way can keep web api response content-type "application/json" , have ie interpret correctly?
• is there better way of doing file upload when using ie , web api? maybe different plugin or better technique?

additional restrictions: cannot use activex or flash website. can use different plugin, if has general cross-browser support. (ie, chrome, firefox, safari, etc)

my html:

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

my javascript:

function onfilechange( e ) {     if ( e.type === e.originalevent.type ) {         var filepath = $( e.currenttarget ).val();         if ( filepath !== '' ) {             $( ).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" response headers (doesn't work in 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" response headers (works in 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 

when ajaxform uses iframe submission mode, response call rendered in body of iframe. means must content type browser can render—generally html, text/plain happen work. browser can't render application/json page.

there specific problem using text/plain too, in browsers may content-sniff it, , treat resource html if there's looks html tag in data. if json comes user-supplied data in it, allow inject executable javascript site (xss attack).

as suggested ajaxform doc you're expected detect when call comes iframe post instead of ajax, , return text/html response textarea wrapper in case:

to account challenges of script , json responses when using iframe mode, form plugin allows these responses embedded in textarea element , recommended these response types when used in conjuction file uploads , older browsers.