☰

jQuery で Ajax リクエストを使用して FormData オブジェクトを送信するにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon javascript jquery ajax html multipartform-data
jQuery で Ajax リクエストを使用して FormData オブジェクトを送信するにはどうすればいいですか? [重複] 質問する

のXMLHttpRequest レベル 2標準 (まだ作業草案) はFormDataインターフェイスを定義します。このインターフェイスにより、FileXHR リクエスト (Ajax リクエスト) にオブジェクトを追加できるようになります。

ちなみに、これは新しい機能です。以前は、「hidden-iframe-trick」が使用されていました（これについては私のもう一つの質問）。

仕組みは以下のとおりです（例）：

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

inputはフィールドであり、<input type="file">はhandlerAjax リクエストの成功ハンドラです。

これは、すべてのブラウザ (繰り返しますが、IE を除く) で正常に動作します。

さて、この機能を jQuery で動作させたいと思います。私はこれを試しました:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

残念ながら、それは機能しません（「不正な呼び出し」エラーが発生します -スクリーンショットはこちら）。jQuery はフォーム フィールド名 / 値を表す単純なキー値オブジェクトを想定していると思われますが、FormData渡しているインスタンスは明らかに互換性がありません。

FormDataさて、にインスタンスを渡すことが可能になったのでxhr.send()、jQuery でも動作させることが可能になることを期待しています。

アップデート：

jQuery の Bug Tracker に「機能チケット」を作成しました。こちらです:http://bugs.jquery.com/ticket/9995

「Ajax プレフィルター」を使用するように提案されました...

アップデート：

まず、どのような動作を実現したいかを示すデモを紹介します。

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript:

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

上記のコードを実行すると、次の HTTP リクエストが生成されます。

マルチパートデータ

これが私が必要としているものです- 「multipart/form-data」コンテンツ タイプが欲しいのです!

提案される解決策は次のようになります。

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

ただし、次の結果になります。

間違ったコンテンツタイプ

ご覧のとおり、コンテンツ タイプが間違っています...

ベストアンサー1

次のようにできると思います:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

ノート：

  • に設定するprocessDataと、falsejQueryがデータを自動的にクエリ文字列に変換するのを防ぐことができます。ドキュメント詳細については。

  • contentTypeをに設定することfalseは必須です。そうしないとjQuery間違って設定する。

おすすめ記事