IE iframe неправильно обрабатывает ответ приложения / json
В настоящее время я обновляю части веб-сайта ASP.NET MVC, чтобы сделать их более RESTful, используя ASP.NET Web API. Одной из функций, которую мы переходим к более RESTful дизайну, является загрузка файлов. Для клиента мы используем плагин jquery,ajaxForm, чтобы завершить создание iframe, который отправит форму, содержащую элемент ввода файла. Это прекрасно работает с ASP.NET MVC.
При изменении его для использования нашей конечной точки Web API, которая возвращает ответ с Content-Type «application / json», мы заметили проблемы с Internet Explorer 9. Похоже, функция успеха ajaxForm никогда не вызывалась. Из того, что я могу сказать, очевидно, что iframe в IE интерпретирует тело ответа с Content-Type «application / json» как вложение файла для загрузки. Это означает, что он никогда не запускает «загруженное» событие iframe, что означает, что обработчик события onload ajaxForm никогда не сработает, и наша функция успеха ajaxForm никогда не будет вызываться.
Мы также заметили проблему в IE 7, но не смогли воссоздать проблему в последних версиях Firefox или Chrome, даже когда заставляли их использовать iframe вместо File API с FormData.
Чтобы решить эту проблему сейчас, я теперь принудительно возвращаю ответ Content-Type обратно на «text / plain», что мы и возвращали ранее из действий контроллера ASP.NET MVC, которые обрабатывали загрузку файлов. Это заставляет все работать снова.
Мои вопросы:
Есть ли способ сохранить ответ Content-Type Web API как «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