Actualmente estoy actualizando partes de un sitio web de ASP.NET MVC para tener más RESTAURACIÓN, utilizando la API web de ASP.NET. Una de las características que estamos trasladando a un diseño más REST es la carga de archivos. Para el cliente, estamos usando un plugin jquery,ajaxForm, para envolver la creación de un iframe que enviará el formulario que contiene el elemento de entrada de archivo. Esto estaba funcionando muy bien con ASP.NET MVC.

Al cambiarlo para usar nuestro punto final de API web, que devuelve una respuesta con un Content-Type de "application / json", notamos problemas con Internet Explorer 9. Parece que la función de éxito ajaxForm nunca fue llamada. Por lo que puedo decir, parece que el iframe en IE interpreta el cuerpo de una respuesta con un Content-Type de "application / json" como un archivo adjunto para descargar. Esto significa que nunca se activa el evento "cargado" del iframe, lo que significa que el controlador de eventos onjaxForm onload nunca se activará, y nuestra función de éxito ajaxForm nunca será llamada.

También notamos el problema en IE 7, pero no pudimos recrearlo en las últimas versiones de Firefox o Chrome, incluso cuando los obligamos a usar un iframe en lugar de File API con FormData.

Para resolver este problema por ahora, ahora estoy forzando la respuesta Content-Type de nuevo a "text / plain", que es lo que estábamos devolviendo anteriormente de las acciones del controlador MVC de ASP.NET que manejaban la carga de archivos. Esto hace que todo vuelva a funcionar.

Mis preguntas:

¿Hay alguna manera de mantener la respuesta de la API web Content-Type como "application / json" y que IE lo interprete correctamente?¿Hay una mejor manera de cargar archivos cuando se utiliza IE y la API web? ¿Tal vez un plugin diferente o mejor técnica?

Restricciones adicionales: No puedo usar ActiveX o Flash para este sitio web. Puedo usar un complemento diferente, pero solo si tiene soporte general para varios navegadores. (IE, Chrome, Firefox, Safari, etc.)

Mi HTML:

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

Mi 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 );
});

Encabezados de respuesta de "application / json" (no funciona en 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

Encabezados de respuesta "text / plain" (funciona en 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