dropzone 批量上传多个文件并依次添加对应的点击按钮

要实现dropzone批量上传多个文件并依次添加对应的点击按钮，需要使用JavaScript动态生成HTML元素，然后将其添加到DOM中。下面是一个示例代码：

HTML部分：

<div id="dropzone">
  将文件拖到此处上传
  <div id="file-list"></div>
</div>

JavaScript部分：

var dropzone = document.getElementById('dropzone');
var fileList = document.getElementById('file-list');
var files = [];

dropzone.addEventListener('dragover', handleDragOver, false);
dropzone.addEventListener('drop', handleFileSelect, false);

function handleDragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
}

function handleFileSelect(e) {
  e.preventDefault();
  var newFiles = e.dataTransfer.files;

  for (var i = 0; i < newFiles.length; i++) {
    files.push(newFiles[i]);
    var fileItem = document.createElement('div');
    fileItem.innerHTML = newFiles[i].name + '<button data-index="' + (files.length - 1) + '">上传</button>';
    fileList.appendChild(fileItem);
  }

  var buttons = fileList.getElementsByTagName('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', handleFileUpload, false);
  }
}

function handleFileUpload(e) {
  e.preventDefault();
  var index = e.target.getAttribute('data-index');
  var file = files[index];
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
}

在这个例子中，我们使用了一个数组来存储上传的文件，并使用for循环遍历新添加的文件，动态创建HTML元素并将其添加到DOM中。每个文件元素包含文件名和一个上传按钮，按钮上使用了data-index属性来存储对应文件在数组中的索引值。然后，我们通过getElementsByTagName获取所有的上传按钮，并使用addEventListener为每个按钮添加click事件监听器。当用户点击上传按钮时，我们可以根据其data-index属性获取对应的文件，并将其上传到服务器。