大変お世話になります。
現在、ajaxでPHPスクリプトに情報を流した後、
その結果をうけた内容を受け、画面に表示するというモデルを構築しています。
より厳密には、ajaxで送信するのはwordやpdfなどのドキュメントファイルで、ドラッグアンドドロップ→ajaxにてPHPへ渡す→結果の値(具体的には「○○○ファイルをアップロードしました」のような文言)を画面で表示するルートをだどりたいと思っています。
これだけであれば、問題なく上記のようなメッセージを出力させることができたのですが、
それに加えて、複数アップロードファイル数分のajax送信処理→結果受取の処理をしようとすると、
画面に出力される結果は不安定、つまり1つのファイル分の結果のみだったり、問題なく帰ってきたりと
結果がまちまちになってしまうのです。
非同期通信の性質から、非同期処理をスルーしてその先の処理を先行してしまうことがこうした結果を生むことがわかってきました。しかし、そうなると、安定してアップロードしたファイル数分の処理を行い、その結果を返し、それを画面に問題なく表示させるためには、どのような知恵が必要でしょうか?
ちなみに、下記にそのサンプルコードを示しますが、ajax処理結果を受けた後、.then以下のコールバック関数が、一つの変数に結果を回数分追加して代入していき、その変数を次のthenで出力ダイアログにセットする、という具合でスクリプトを進めるようにしております。
大変複雑なモデルを記述してしまうようで、恐縮に存じますが、何か良い知恵がございましたらご教示の程お願い申し上げます。
該当のソースコード
Javascript
1var dfd = $.Deferred(); 2 3 let promise = new Promise((resolve, reject)=>{ 4 5 for (var i = 0; i < files.length; i++){ 6 7 var fd = new FormData(); 8 var px = sendFileToServer(fd).then(function(result){ 9 10 message.push('<p>'+result+'</p>'); 11 m = message.join(''); 12 resolve(m); 13 14 }); 15 16 } 17 18 }) 19 .then(function(n){ 20 21 setTimeout(()=>{ 22 23 /**************************************** 24 完了ダイアログボックスの生成 $.confirm() 25 ****************************************/ 26 $.confirm({ 27 title: 'File Uploading Done', 28 content: '以下のファイルのアップロード結果<br>'+n, 29 type: 'blue', 30 typeAnimated: true, 31 buttons: { 32 OK: function () { 33 } 34 } 35 }); 36 },1000); 37 38 });
回答2件
あなたの回答
tips
プレビュー