js实现动态添加上传文件页面

实现动态添加上传文件页面，可以通过以下几个步骤完成：

1. HTML部分

首先，在HTML文件中，提供一个用于点击后触发上传文件对话框的按钮，并准备一个div容器，用于动态添加上传文件表单：

<button id="addFileBtn">添加上传文件</button>
<div id="fileForms"></div>

1. JS部分

接下来，我们需要编写Javascript代码，实现动态添加上传文件表单。具体实现步骤如下：

• 当用户点击“添加上传文件”按钮时，我们会通过createElement方法，动态创建一个表单，并将其添加到指定的容器中：

const fileFormsContainer = document.getElementById("fileForms");

document.getElementById("addFileBtn").addEventListener("click", function () {
  // 创建一个文件上传表单
  const fileForm = document.createElement("form");
  fileForm.setAttribute("method", "post");
  fileForm.setAttribute("enctype", "multipart/form-data");

  // 创建文件上传输入框
  const fileInput = document.createElement("input");
  fileInput.setAttribute("type", "file");
  fileInput.setAttribute("name", "file");
  fileInput.setAttribute("required", "true");

  // 创建提交按钮
  const submitBtn = document.createElement("button");
  submitBtn.setAttribute("type", "submit");
  submitBtn.innerText = "上传";

  // 将文件上传输入框和提交按钮添加到文件上传表单中
  fileForm.appendChild(fileInput);
  fileForm.appendChild(submitBtn);

  // 将文件上传表单添加到文件上传表单容器中
  fileFormsContainer.appendChild(fileForm);
});

• 当用户选择文件并点击提交按钮时，我们会通过fetch方法将文件上传到服务器：

// 监听文件上传表单的submit事件
fileForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const formData = new FormData(fileForm);
  fetch("upload.php", {
    method: "POST",
    body: formData,
  })
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
    })
    .catch((err) => {
      console.error(err);
    });
});

在上述代码中，我们将文件上传表单的submit事件阻止（event.preventDefault()），并使用FormData对象获取表单中上传的文件。然后，我们通过fetch方法将文件上传到服务器，并在上传成功后，打印出服务器返回的响应数据（使用了promises）。

• 服务器端代码

最后，我们需要在服务器端，接收并处理文件上传请求。下面是一个简单的PHP文件上传代码示例：

<?php
$uploadDir = "uploads/"; // 文件上传目录

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["file"])) {
  $file = $_FILES["file"];
  $fileName = $file["name"];
  $filePath = $uploadDir . $fileName;

  // 将文件上传到指定目录
  if (move_uploaded_file($file["tmp_name"], $filePath)) {
    echo json_encode(["status" => "success"]);
  } else {
    echo json_encode(["status" => "error"]);
  }
}
?>

在上述代码中，我们首先定义了上传文件的保存目录（$uploadDir），然后判断请求方法是否为POST，并且是否上传了文件。如果满足条件，我们就将文件保存到指定目录中，并通过json_encode方法，将上传结果返回给前端页面。

至此，我们就完成了动态添加上传文件页面的实现。此时，当用户点击“添加上传文件”按钮时，就会动态创建一个上传文件表单，并提供上传文件功能。用户可以通过这个表单，上传自己的文件。

示例1：

首先，我们在HTML页面中，添加一个用于接收上传文件结果的<div>元素：

<button id="addFileBtn">添加上传文件</button>
<div id="fileForms"></div>

<div id="uploadResult"></div>

然后，在Javascript代码中，我们可以将服务器返回的上传结果，动态显示在上述<div>元素中：

.then((data) => {
  const resultDiv = document.getElementById("uploadResult");
  resultDiv.innerText = data.status;
})

示例2：

除了上传文件功能，我们还可以为上传文件表单，添加其他的自定义功能。例如，在下面的示例中，我们为每个上传文件表单，添加了一个删除按钮，用户可以点击该按钮，删除对应的上传文件表单：

const fileFormsContainer = document.getElementById("fileForms");

document.getElementById("addFileBtn").addEventListener("click", function () {
  // 创建一个文件上传表单
  const fileForm = document.createElement("form");
  fileForm.setAttribute("method", "post");
  fileForm.setAttribute("enctype", "multipart/form-data");

  // 创建文件上传输入框
  const fileInput = document.createElement("input");
  fileInput.setAttribute("type", "file");
  fileInput.setAttribute("name", "file");
  fileInput.setAttribute("required", "true");

  // 创建提交按钮和删除按钮
  const submitBtn = document.createElement("button");
  submitBtn.setAttribute("type", "submit");
  submitBtn.innerText = "上传";

  const deleteBtn = document.createElement("button");
  deleteBtn.setAttribute("type", "button");
  deleteBtn.innerText = "删除";
  deleteBtn.addEventListener("click", function () {
    fileFormsContainer.removeChild(fileForm);
  });

  // 将文件上传输入框、提交按钮和删除按钮添加到文件上传表单中
  fileForm.appendChild(fileInput);
  fileForm.appendChild(submitBtn);
  fileForm.appendChild(deleteBtn);

  // 将文件上传表单添加到文件上传表单容器中
  fileFormsContainer.appendChild(fileForm);
});

在上述代码中，我们为每个上传文件表单，添加了一个“删除”按钮，并通过addEventListener方法，为该按钮添加了“点击删除”事件的处理函数。当用户点击“删除”按钮时，相应的上传文件表单，就会被从文件上传表单容器中删除。