画像を保存するためのドラッグ アンド ドロップ機能を作成しました。保存したばかりの画像を確認したいと思います。問題は、ajax リクエストがその画像をサーバーに送信するまで待たないことです。画像のインスタントプレビューが必要です。これを作成できるコードを作成しましたが、それに ajax リクエストを追加すると、ajax リクエストが完了するまで HTML ページにこの画像が表示されません。しかし、この ajax リクエストにコメントすると、HTML ページに画像が即座に表示されます。どうすればすべてを入手できますか? Ajax + インスタント プレビュー。
これが私のコードです。お気軽にお問い合わせください。
// initialise our dropzone and set ondrop event function
var dropzone = document.getElementById('ta');
dropzone.ondrop = function(e){
e.preventDefault();
readfiles(e.dataTransfer.files);
};
// preview image that was added to dropzone
function previewImg(file) {
var image = new Image();
image.src = webkitURL.createObjectURL(file);// make url for image using webkitURL
image.width = 550; // a fake resize
document.getElementById('body').appendChild(image); // add image to element (for example to the body)
}
function readfiles(files) {
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
previewImg(files[i]); // call for preview
formData.append('file'+i, files[i]); // add file to form
}
formData.append('moreInfo','myValuableValue');// you can append additional string info
// if we comment this request preview will appear instant
// but if we not, preview will appear only after end of ajax request
$.ajax({
url: './file_handler.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
console.log('done');
},
cache: false,
contentType: false,
processData: false
});
}
これを修正したいのですが、方法がわかりません。jQuery $.ajax リクエストを使用します。ちなみに、コンソール出力も遅くなり、リクエスト終了後に一斉に表示されます。道を教えてください。