15

いくつかの大きなbase64でエンコードされた文字列を含む、大量のデータを含むJavaScriptオブジェクトがあります。

現在、単純な ajax POST を介してデータをサーバーに送信していますが、データが非常に大きいため、ユーザーの待ち時間は許容できません。

このため、新しい html5 ファイル アップロード機能を利用し、データがサーバーにアップロードされるときに実際に進行状況を測定して、この長いプロセス中にユーザーに一定のフィードバックを提供したいと考えています。

この機能を使用するには、この大きな配列を、url パラメーターとして送信される巨大なオブジェクトとしてではなく、実際のファイルとして送信する必要があります。

次のいずれかの方法はありますか？

A. このオブジェクトを実際のテキスト ファイルに変換し、そのまま送信します。

また

B. html5 の進行状況 API にフックし、この標準的な ajax POST の進行状況を実際に測定します。

前もって感謝します。

4

2 に答える 2

18

JavaScript オブジェクト ( myData) を取得し、それを JSON に文字列化して、MIME タイプ JSON の Blob にパックし、HTML5 アップロード API を使用してサーバーに送信することができます。プログレス (progressコールバック関数内) を使用して、HTML5 プログレス バーの値を更新できます。

var myData = {
    data1: "Huge amount of data",
    data2: "More very large data"
};

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function (e) {
    console.log(100*(e.loaded / e.total) + '%');
}, false);

xhr.open('POST', 'url', true);

var data = new FormData();
data.append('file', new Blob([JSON.stringify(myData)],{type:'application/json'}));
xhr.send(data);
于 2013-01-04T01:19:20.683 に答える
2

Blobobject またはobject に変換しFile、 に追加し、またはをFormData使用してサーバーに送信します。xhrfetch

var data = 'some data'; //string, arrary buffer, typed array, blob, ...
var filename01 = 'abc.txt', filename02 = 'efg.txt';
var type = 'text/plain';
var fd = new FormData();

//use file object
var file = new File([data], filename01, {type:type}); //add filename here
fd.append('file01', file);

//use blob object
var blob = new Blob([data], {type:type});
fd.append('file02', blob, filename02); //add filename by append method

fetch('/server.php', {method:'POST', body:fd})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;
于 2016-08-13T19:24:58.560 に答える