我做了一些拖放功能来保存图像，我想看看我刚刚保存了哪些图像。问题是我不会等待 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 请求。顺便说一句，控制台输出也变慢了，并在请求结束后立即显示。请给我指路。