文档

• https://developer.mozilla.org/zh-CN/docs/Web/API/File
• https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drag_event

通过读取文件可以获取File对象的信息

lastModified: 1707210706000
lastModifiedDate: Tue Feb 06 2024 17:11:46 GMT+0800 (中国标准时间) {}
name: "fileauth.txt"
size: 64
type: "text/plain"
webkitRelativePath: ""

通过input标签获取文件对象

<input type="file" />

<script>
  let input = document.querySelector('input')

  input.addEventListener('change', function (e) {
    // 获取FileList对象
    console.log(e.target.files)
  })
</script>

遍历所有文件

// 遍历所有文件
for (let i = 0; i < files.length; i++) {
  // 取得一个文件
  let file = files[i]
  // 取得文件名
  console.log(file.name)
}

通过拖拽获取文件对象

<!-- 样式 -->
<style>
  .dropzone {
    border: 2px dashed #ccc;
    background-color: #f9f9f9;
    height: 200px;
    width: 200px;
  }
</style>

<!-- 界面 -->
<div
  class="dropzone"
  id="dropzone"
></div>

<!-- 逻辑 -->
<script>
  let dropzone = document.querySelector('#dropzone')

  // 注意阻止浏览器默认行为
  dropzone.addEventListener('dragenter', (e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('dragenter')
  })

  dropzone.addEventListener('dragleave', (e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('dragleave')
  })

  dropzone.addEventListener('dragover', (e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('dragover')
  })

  dropzone.addEventListener('drop', (e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('drop')

    // 获取文件列表对象 FileList
    console.log(e.dataTransfer.files)
  })
</script>

参考文章

• js实现控制文件拖拽并获取拖拽内容功能
• Vue实现文件拖拽功能