如果我们想一次在一行中插入多个通过dragdrop上传的图像，我们该怎么办？

<div id="dropArea">
  <p>拖放图像到这里</p>
</div>
<div id="imageContainer"></div>

document.addEventListener('DOMContentLoaded', function() {
  const dropArea = document.getElementById('dropArea');
  const imageContainer = document.getElementById('imageContainer');

  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight(e) {
    dropArea.style.backgroundColor = '#fdd';
  }

  function unhighlight(e) {
    dropArea.style.backgroundColor = '';
  }

  dropArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    let dt = e.dataTransfer;
    let files = dt.files;

    handleFiles(files);
  }

  function handleFiles(files) {
    ([...files]).forEach(uploadFile);
  }

  function uploadFile(file) {
    if (file.type.startsWith('image/')) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        let img = document.createElement('img');
        img.src = reader.result;
        img.style.width = '100px'; // 设置图像宽度
        imageContainer.appendChild(img);
      }
    }
  }
});