前端上传文件或者上传文件夹

<!-- 选择文件 -->
<div>
  <label for="upload-file">点击选择文件</label>
  <input
    title="点击选择文件"
    id="upload-file"
    multiple=""
    accept="*/*"
    type="file"
    name="html5uploader"
  />
</div>
<!-- 选择文件夹 -->
<div style="margin-top: 20px">
  <label for="upload-directory">点击选择文件夹</label>
  <input
    title="点击选择文件夹"
    id="upload-directory"
    multiple=""
    webkitdirectory=""
    accept="*/*"
    type="file"
    name="html5uploader"
  />
</div>
<script>
  // 选择文件
  document
    .querySelector('#upload-file')
    .addEventListener('input', function (event) {
      for (let file of event.target.files) {
        console.log(file)
      }
    })
  // 选择文件夹
  document
    .querySelector('#upload-directory')
    .addEventListener('input', function (event) {
      for (let file of event.target.files) {
        console.log(file)
        // 属性 webkitRelativePath 有值
      }
    })
</script>