上传后如何显示新的文件上传按钮？

Question

我想要无限个文件上传按钮。发送文件后，立即出现一个新按钮。

我该如何做：

Answer 1

您可以将事件侦听器添加到元素以侦听更改，并设置 createUploadButton 函数以在事件交付时触发。

element.addEventListener('change', createUploadButton);

Answer 2

您的问题的确切答案如下：

function makeNewButton() {
  //create an upload button:
  let uploadbtn = document.createElement('input');
  uploadbtn.setAttribute('type', 'file');
  //append it to your document:
  document.body.appendChild(uploadbtn);
  //add an event listener that fires the function again: 
  uploadbtn.addEventListener('change', makeNewButton);
  //make delete element: 
  let deletetext = document.createElement('p');
  deletetext.textContent = 'Delete';
  //append it to your document: 
  document.body.appendChild(deletetext);
  //Add an event listener to remove the original button and the delete link on click:
  deletetext.addEventListener('click', function() {
    uploadbtn.remove();
    deletetext.remove();
  });


}

makeNewButton();

可以在以下位置找到文档界面的完整文档：https://developer.mozilla.org/en-US/docs/Web/API/Document

处理文件并将它们发送到服务器是另一回事。

Answer 3

当我选择图像时，将创建一个新按钮，但是当我更改图像时，将再次创建另一个新按钮。

为什么会这样？

function makeNewButton() {
  //create an upload button:
  let uploadbtn = document.createElement('input');
  uploadbtn.setAttribute('type', 'file');
  //append it to your document:
  document.body.appendChild(uploadbtn);
  //add an event listener that fires the function again: 
  uploadbtn.addEventListener('change', makeNewButton);
  //make delete element: 
  let deletetext = document.createElement('p');
  deletetext.textContent = 'Delete';
  //append it to your document: 
  document.body.appendChild(deletetext);
  //Add an event listener to remove the original button and the delete link on click:
  deletetext.addEventListener('click', function() {
    uploadbtn.remove();
    deletetext.remove();
  });


}

makeNewButton();