Javascript 如何在操作完成后提醒消息？_Javascript_Jquery_Asynchronous_Async Await

Javascript 如何在操作完成后提醒消息？

javascript jquery asynchronous

Javascript 如何在操作完成后提醒消息？,javascript,jquery,asynchronous,async-await,Javascript,Jquery,Asynchronous,Async Await,我想做以下事情：在一个用户上传了2张图片后，我想记录一条消息，说明这个过程已经完成，这样以后我就可以做其他事情了。这是一把小提琴：我的html在这里： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax

我想做以下事情：在一个用户上传了2张图片后，我想记录一条消息，说明这个过程已经完成，这样以后我就可以做其他事情了。这是一把小提琴：
我的html在这里：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container-fluid slide2-img">
      <p>Click on the "Choose file" button to upload a picture:</p>
      <div class="uploadbuttons">
        <form class="" action="/action_page.php">
          <input type="file" id="picture1">
          <div id="appendimg1"></div>
        </form>
        <form class="" action="/action_page.php">
          <input type="file" id="picture2">
          <div id="appendimg2"></div>
        </form>
      </div>
    </div>
  </body>
</html>

现在，它会在上传两张图片之前向我发出警报（警报会在页面渲染后立即显示）。我一直在尝试使用async Wait，但没有用。谁能帮帮我吗？

我建议不要干——不要重复

在这里，我计算div中的图像数量，并从该div中委派更改

$（.uploadbuttons”）。打开（“更改”，函数（e）{
常数tgt=e.target；
如果（tgt.type！=“文件”）返回；
如果（！tgt.files | |！tgt.files[0]）返回
const reader=new FileReader（）；
const idx=tgt.id.replace（“图片”，“图片”）；
reader.onload=函数（e）{
常量图像=``；
$（“#appendimg”+idx）.html（图像）；
console.log（'img'，idx）；
if（$（“.uploadbuttons”）.find（“img”）.length==2）console.log（“均已上载”）
};
reader.readAsDataURL（tgt.files[0]）；
});

单击“选择文件”按钮上载图片：
非常感谢您的帮助！非常感谢
function doImage1() {
  var image1, imgId1;
  const fileSelector1 = document.getElementById('picture1'); //get first input
  fileSelector1.addEventListener('change', function() { //read the image
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) { //call function to create img and append it
        image1 = '<img src="' + e.target.result + '" style="width:200px;height:auto;" id="' + 'image1-morph">';
        $("#appendimg1").empty().append(image1);
        imgId1 = image1.split('id="').pop().replace('">', '');
        console.log('1st img id', imgId1);
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
}

function doImage2() {
  var image2, imgId2;
  const fileSelector2 = document.getElementById('picture2'); //get 2nd input
  fileSelector2.addEventListener('change', function() { //read the image
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) { //call function to create img and append it
        image2 = '<img src="' + e.target.result + '" style="width:200px;height:auto;" id="' + 'image2-morph">';
        $("#appendimg2").empty().append(image2);
        imgId2 = image2.split('id="').pop().replace('">', '');
        console.log('2nd img id', imgId2);
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
}

doImage1();
doImage2();

// how to wait till both images have been uploaded and then execute other code?
alert('both images have been uploaded');

// other code (...)


.slide2-img form {
  float: left;
}