js：通过input标签或Drag拖拽文件实现浏览器文件上传获取File文件对象

本文主要是介绍js：通过input标签或Drag拖拽文件实现浏览器文件上传获取File文件对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文档

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><!-- 界面 -->
<divclass="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')// 获取文件列表对象 FileListconsole.log(e.dataTransfer.files)})
</script>