1

JSON で応答するサーバーに (複数の) ファイルを送信するための HTML アップロード ボタンがあります。その応答に基づいて、アプリケーション フローが続行されます。

ここで、(サーバーの応答に応じて) 残りのコードをテストするために、ファイルのアップロードをシミュレートして、リロードのたびに新しいファイルを手動で選択してアップロードする必要がないようにします。

以下は、アップロード方法の簡略版です。

uploadToServer: function (file) {

    var self = this,
        data = new FormData(),
        xhr = new XMLHttpRequest();

    // When the request has successfully completed.
    xhr.onload = function () {
        var response = $.parseJSON(this.responseText);

        var photo = new App.Models.Photo({
            filename: response.filename,
            name: response.uuid
        });

        var photoView = new App.Views.Photo({ model: photo });

        $('.photos').append(photoView.render().el);
    };

    // Send to server, where we can then access it with $_FILES['file].
    data.append('file', file);
    xhr.open('POST', this.url);
    xhr.send(data);
}

uploadToServerパラメータfileはFileListのFileオブジェクトです。ご覧のとおり、私のサーバーは 内のファイルを待機しています。$_FILES['file']

が に渡される実際のファイル オブジェクトをシミュレートできれば素晴らしいと思います。なぜなら、やuploadToServerなどの既存のイベントが利用可能であることを心配する必要がないからです。xhr.onloadxhr.onprogress

それが不可能な場合は、カスタムuploadToServerメソッドを作成して、通常の AJAX 要求と偽の応答をサーバーに送信できます。しかし、どうすればイベント (など) からその AJAX リクエストxhr.onloadにコードを使用してバインドできますか?xhr.onprogress

4

1 に答える 1

2

キャンバスを作成し、それをファイルに変換し、結果をメソッドに渡すことで、ファイルのアップロードをシミュレートできます。

  1. キャンバスを作成します。ここでは、素敵な赤い四角です

    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext("2d");

canvas.width = 100;
canvas.height = 100;
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 100, 100);

document.body.appendChild(canvas);

  2. それをファイルに変換し、メソッドに渡します。Canvas to Blobを使用してテストを簡素化しましたが、必要に応じて必要最低限​​の部分を抽出できる可能性があります。

    canvas.toBlob( function (blob) {
    m.uploadToServer(blob);
}, 'image/jpeg');

And a Fiddle http://jsfiddle.net/pvWxx/必ずコンソールを開いて、イベントとリクエストを確認してください。

blob でファイル名を渡したい場合は、3 番目の引数を に渡すことができます。 「 FormData としてアップロードされた Blob にファイル名を付ける方法」をformData.append参照してください。および更新された Fiddle http://jsfiddle.net/pvWxx/1/

于 2013-01-12T13:24:28.730 に答える