index.phpページに画像アップローダーがあります。画像のアップロードが開始されると(画像をアップロードボックスにドラッグすることで開始されます)、POSTリクエストが作成されます(FYI HTML5 + php Uploader)
POST http://localhost:8888/backbone_images/post_file.php
post_file.php内で、アップロードした画像のURLを、後でグローバルjavascript変数「globe」に割り当てるスクリプトのexit_statusに挿入して取得します。
if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
exit_status($pic['name']);
}
バックボーンスクリプトファイル内で、ドロップボックスへのドロップイベントをチェックします。これは機能します。
App.Views.AddImage = Backbone.View.extend({
el: '#addImage',
events: {
'drop': 'submit'
},
そのため、画像はドロップボックスにドラッグされ、送信関数を呼び出して新しいモデルを作成し、新しい画像のURL(javascript変数を介して)を新しいモデルのURLに割り当てます。
submit: function(e) {
e.preventDefault(); // preventing default submission..
var newImage = globe; // assign globe --url of the newly created image--to new model
var imager = new App.Models.Person({ url: newImage });//creating a new img object
this.collection.add(imager);
}
問題は、画像がドロップされた後にバックボーン送信機能がトリガーされたときに、/ post_file.phpへのPOSTがまだ実行されていないため、変数'globe'に新しいURLが含まれておらず、新しく作成されたモデルにURLがないことになります
質問:画像がドロップされた後、「送信」機能を実行する前に、バックボーンイベント内でPOSTが終了するのを待つ方法はありますか?
使用しようとしました:$.when( $.ajax("/post_file.php") )
送信関数内で、これはすべて、別のPOSTリクエストを実行し、変数値を残して、待機している画像URLを取得する元のPOSTリクエストを実行します。
私の好みのワークフローは
a。画像のドラッグ/アップロード、(POSTが実行)b。アップロードされた画像のURLを使用して新しいモデルがコレクションに追加されます。
ただし、最初にクリック機能を追加する必要はありません。そうしないと、POSTが終了しません。
a。画像のドラッグ/アップロード、(POSTパフォーマンス)b。送信ボタンをクリックしますc。モデルがコレクションに追加されます