foreach verzögern, bis xmlhttprequest die Arbeit abgeschlossen hat

Wenn Ihre uploadFileFunktion ein Promise zurückgibt, können Sie awaitoder einen .then(...)Rückruf mit verwenden Promise.all:

function uploadFile(file, i) { 
  return new Promise((resolve, reject) => {
    var Url_imageAdd = "mytargetUrl...."
    var xhr = new XMLHttpRequest()
    var formData = new FormData()
    xhr.open('POST', Url_imageAdd, true)
    xhr.upload.addEventListener("progress", function(e) {
      updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
    })

    xhr.addEventListener('readystatechange', function(e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('lConfirm').innerHTML="Files uploaded...."

        urlCount = parseInt($('#urlCount').val())
        $('#urlCount').val(urlCount+filescount)
        var imageSet = JSON.parse(xhr.responseText)
        resolve(imageSet)
      } else if (xhr.readyState == 4 && xhr.status != 200) {
        reject(new Error("Upload Error...."))
      }
    })

    formData.append('img_file', file)
    formData.append('title',"mytitle")
    xhr.send(formData)
  });
}

Jetzt können Sie dies tun:

async function handleFiles(files,i) {
   files = [...files]

   try {
     await Promise.all(files.map(uploadFile));
     // We've finished
   } catch (err) {
     alert('Upload failed!');
     window.location.reload();
   }
}

Oder wenn Sie sie in Reihe statt parallel ausführen möchten, mit einer Verzögerung von 2 Sekunden zwischen:

function delay(milliseconds) {
  return new Promise(resolve => {
    setTimeout(resolve, milliseconds);
  });
}

async function handleFiles(files,i) {
  files = [...files]

    for (let i = 0; i < files.length; i++) { 
        try {
          await delay(2000);
          await uploadFile(files[i], i);
        } catch (err) {
          alert('Upload failed!');
          window.location.reload();
        }
      }

  // We've finished
}