0

tl;dr: 以下の 2 つのスクリプトは同一ではないと思いますが、同一ではありません。なんで？

この記事の背景情報をお伝えします。動的アップロード ページを作成するために AJAX 要求を行う画像アップロード フォームを作成しようとしています。HTML5 の File API について学んだので、AJAX リクエストでそれを使用しようとしています。MDNのいくつかの素晴らしい例に従って、独自のインスタンスを構築しました。私の作業スクリプトは AJAX リクエストにストレート JS を使用していますが、代わりに jQuery を使用するバージョンを構築してみました。私の質問は、jQuery バージョンが正しく動作しないのはなぜですか? 私が知る限り、これは JS xhr スタイルの AJAX から jQuery スタイルの AJAX へのストレートな移植です。(この質問のポイントは、jQuery の AJAX API の学術的な理解を得ることです。私は既に動作するスクリプトを持っているので、私の実用的なニーズは満たされています)

動作中の Javascript AJAX リクエストは次のとおりです。

$("form").submit(function(){

    var file = $("input:file").get(0).files[0];
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    fd.append('img', file);
    xhr.send(fd);

    return false;

});

そして、動作しない jQuery バージョン:

$("form").submit(function(){

    var fd = new FormData();
    var file = $("input:file").get(0).files[0];
    fd.append('img', file);

    $.post("/upload", fd, function(data){
        alert(data);
    });

    return false;

});
4

2 に答える 2

1

文字列でない場合 、 jQuery は$.param2 番目の引数 (およびその他) を呼び出します。は文字列ではありませんが、onは無効です。生の値を使用する場合は、ajax 設定で次のように設定する必要があります: http://api.jquery.com/jQuery.ajax/$.postfd$.paramfdfdprocessDatafalse

$.ajax({
    ur: "/upload",
    data: fd,
    processData: false,
}).done(function (data) {
    console.log(data);
});
于 2013-03-20T04:44:03.327 に答える
1

ドキュメントに投稿されている$.postように、データ引数としてプレーン オブジェクトまたは文字列を受け入れます。を使用することはできませんFormData。

データ
型: PlainObject または String
リクエストとともにサーバーに送信されるプレーン オブジェクトまたは文字列。

于 2013-03-20T04:38:44.093 に答える