6

現在、ASP.NET Web API を使用して、ASP.NET MVC Web サイトの一部をより RESTful にアップグレードしています。より RESTful な設計に移行している機能の 1 つは、ファイルのアップロードです。クライアントの場合、jquery プラグインajaxFormを使用して、ファイル入力要素を含むフォームを送信する iframe の作成をラップします。これは、ASP.NET MVC でうまく機能していました。

Content-Type が "application/json" の応答を返す Web API エンドポイントを使用するように変更すると、Internet Explorer 9 に問題があることがわかりました。 ajaxForm の成功関数が呼び出されていないようです。私が知る限り、IE の iframe は、Content-Type が "application/json" の応答の本文を、ダウンロードする添付ファイルとして解釈しているようです。これは、iframe の "loaded" イベントが発生しないことを意味します。つまり、ajaxForm onload イベント ハンドラーがトリガーされず、ajaxForm 成功関数が呼び出されません。

この問題は IE 7 でも確認されましたが、最新リリース バージョンの Firefox または Chrome では、FormData で File API ではなく iframe を使用するように強制しても、問題を再現できませんでした。

今のところこの問題を解決するために、レスポンスの Content-Type を強制的に "text/plain" に戻しています。これは、ファイルのアップロードを処理する ASP.NET MVC コントローラー アクションから以前返していたものです。これにより、すべてが再び機能します。

私の質問:

  • Web API 応答の Content-Type を "application/json" のままにして、IE に正しく解釈させる方法はありますか?
  • IE と Web API を使用する場合、ファイルのアップロードを行うためのより良い方法はありますか? 多分別のプラグインまたはより良いテクニックですか？

追加の制限: この Web サイトで 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