仅在javascript循环完成后执行ajax调用
下面是我正在使用的代码，它基本上传递了要上传的多个文件。在循环中，每个文件在客户端调整大小，然后上载 我想在循环完成上传照片后执行一个ajax调用。ajax调用基本上会重新加载特定的div并刷新照片 如何防止ajax调用在循环完成之前执行仅在javascript循环完成后执行ajax调用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,下面是我正在使用的代码，它基本上传递了要上传的多个文件。在循环中，每个文件在客户端调整大小，然后上载 我想在循环完成上传照片后执行一个ajax调用。ajax调用基本上会重新加载特定的div并刷新照片 如何防止ajax调用在循环完成之前执行 if (window.File && window.FileReader && window.FileList && window.Blob) { var files = d
if (window.File && window.FileReader && window.FileList && window.Blob)
{
var files = document.getElementById('filesToUpload').files;
for(var i = 0; i < files.length; i++)
{
resizeAndUpload(files[i]);
}
// when loop finished, execute ajax call
$.ajax
({
type: "POST",
url: "photos.php",
data: dataString,
success: function(html)
{
$("#photo-body").html(html);
}
});
}
}
function resizeAndUpload(file)
{
var reader = new FileReader();
reader.onloadend = function()
{
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function()
{
var MAX_WIDTH = 382.25;
var MAX_HEIGHT = 258.5;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH)
{
if (tempW > MAX_WIDTH)
{
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
}
else
{
if (tempH > MAX_HEIGHT)
{
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(ev)
{
document.getElementById('filesInfo').innerHTML = 'Upload Complete';
};
xhr.open('POST', 'upload-resized-photos.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var data = 'image=' + dataURL;
xhr.send(data);
}
}
reader.readAsDataURL(file);
}
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm)
{
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++)
{
var oInput = arrInputs[i];
if (oInput.type == "file")
{
var sFileName = oInput.value;
if (sFileName.length > 0)
{
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++)
{
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase())
{
blnValid = true;
break;
}
}
if (!blnValid)
{
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
if（window.File&&window.FileReader&&window.FileList&&window.Blob）
{
var files=document.getElementById（'filesToUpload'）.files；
对于（var i=0；itempH）
{
如果（速度>最大宽度）
{
tempH*=最大宽度/tempW；
tempW=最大宽度；
}
}
其他的
{
如果（速度>最大高度）
{
tempW*=最大高度/tempH；
tempH=最大高度；
}
}
var canvas=document.createElement（'canvas'）；
canvas.width=tempW；
canvas.height=tempH；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（this，0，0，tempW，tempH）；
var dataURL=canvas.toDataURL（“image/jpeg”）；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（ev）
{
document.getElementById（'fileInfo'）。innerHTML='Upload Complete'；
};
open（'POST'，'upload resized photos.php'，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
变量数据='图像='+数据URL；
发送（数据）；
}
}
reader.readAsDataURL（文件）；
}
var_validFileExtensions=[“.jpg”、“.jpeg”、“.bmp”、“.gif”、“.png”]；
函数验证（oForm）
{
var arrInputs=oForm.getElementsByTagName（“输入”）；
对于（var i=0；i0）
{
var blnValid=false；
对于（变量j=0；j<_validFileExtensions.length；j++）
{
var sCurExtension=_validfleextensions[j]；
if（sFileName.substr（sFileName.length-sCurExtension.length，sCurExtension.length）.toLowerCase（）==sCurExtension.toLowerCase（））
{
blnValid=true；
打破
}
}
如果（！blnValid）
{
警报（“对不起，+sFileName+”无效，允许的扩展名为：“+_validFileExtensions.join”（，”）；
返回false；
}
}
}
}
返回true；
}
resizeAndUpload（）函数中的一个或多个方法。这意味着在运行其余javascript时，他们将在后台完成自己的工作，并在完成后触发一个事件。一旦这些方法中的最后一个方法完成并触发事件，您将需要调用ajax方法。例如，这些方法是不同步的。这意味着您可能需要执行以下操作：
FileReader.onloadend = function(){
totalFilesLoaded = totalFilesLoaded + 1;
if (totalFilesLoaded == files.length){
//all files have been uploaded, run $ajax
}
}
编辑：现在您已上载了其余代码，请尝试以下操作：
window.totalFilesLoaded = 0;
var files = document.getElementById('filesToUpload').files;
window.totalFilesToLoad = files;
if (window.File && window.FileReader && window.FileList && window.Blob)
{
for(var i = 0; i < files.length; i++)
{
resizeAndUpload(files[i]);
}
}
您可以将$ajax调用包装在一个函数中，并在最后一个循环结束时调用该函数
（仅在脚本的顶部）
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
函数loopFinished（）{
$.ajax
({
类型：“POST”，
url:“photos.php”，
数据：dataString，
成功：函数（html）
{
$（“#照片主体”）.html（html）；
}
});
}
var files=document.getElementById（'filesToUpload'）.files；
对于（var i=0；i
您可以使用任何promise库来执行此操作。下面是使用jQuery承诺的示例
(function ($) {
var files = [1, 2, 3, 4],
allPromises = [];
for (var i = 0; i < files.length; i++) {
var promise = resizeAndUpload(files[i]);
allPromises.push(promise);
}
$.when.apply($, allPromises).done(function () {
makeAjaxCall();
});
function makeAjaxCall() {
console.log('Put Ajax call here');
}
function resizeAndUpload(file) {
var defer = $.Deferred();
//Set timeout simulates your long running process of processing file
setTimeout(function () {
console.log('processing file ' + file);
defer.resolve();
}, 2000);
return defer.promise();
}
})(jQuery);
（函数（$）{
var文件=[1,2,3,4]，
所有承诺=[]；
对于（var i=0；i
这里
function resizeAndUpload(file)
{
var reader = new FileReader();
reader.onloadend = function()
{
...
xhr.onreadystatechange = function(ev)
{
document.getElementById('filesInfo').innerHTML = 'Upload Complete';
window.totalFilesLoaded++;
if (window.totalFilesLoaded == window.totalFilesToLoad.length){
window.runAjax()
}
};
...
}
reader.readAsDataURL(file);
}
if (window.File && window.FileReader && window.FileList && window.Blob) {
function loopFinished(){
$.ajax
({
type: "POST",
url: "photos.php",
data: dataString,
success: function(html)
{
$("#photo-body").html(html);
}
});
}
var files = document.getElementById('filesToUpload').files;
for(var i = 0; i < files.length; i++)
{
resizeAndUpload(files[i]);
if (files.length+1 == [i]){
loopFinished();
}
}
}
(function ($) {
var files = [1, 2, 3, 4],
allPromises = [];
for (var i = 0; i < files.length; i++) {
var promise = resizeAndUpload(files[i]);
allPromises.push(promise);
}
$.when.apply($, allPromises).done(function () {
makeAjaxCall();
});
function makeAjaxCall() {
console.log('Put Ajax call here');
}
function resizeAndUpload(file) {
var defer = $.Deferred();
//Set timeout simulates your long running process of processing file
setTimeout(function () {
console.log('processing file ' + file);
defer.resolve();
}, 2000);
return defer.promise();
}
})(jQuery);