main

分支 (1)

管理

管理

main

js-core-sorting
/
18.多文件上传.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多文件上传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  </head>
  <body>
    <form action="" id="FormUpload">
      <input type="file" id="inputUpload" multiple />
      <button type="submit">提交</button>
    </form>
    <script>
      const form = document.getElementById('FormUpload')
      const ipt = document.getElementById('inputUpload')
      const fileList = []

      ipt.addEventListener('change', function (e) {
        console.log('上传')
        const file = e.target.files[0]
        fileList.push(file)
        console.log(fileList)
      })
      form.addEventListener('submit', function (e) {
        e.preventDefault()
        fileList.forEach((item, index) => {
          let _formData = new FormData()
          _formData.append(`${item.name}file`, item)
          axios
            .post('/xx', _formData)
            .then((res) => console.log(res))
            .catch((err) => console.log(err))
        })
      })
      // 多文件上传，其实就是利用循环依次上传文件，发起请求。
    </script>
  </body>
</html>