1、什么是File
File对象是特殊的Blob,的本质也是一个js二进制大对象(存储的内容为文件),只是比Blob有更多的属性和方法
2、使用方法
在javaScript中,主要有两种方式来获取File对象:
1.<input>元素上选择文件后返回的FileList对象;
2.文件拖放操作生成的DataTransfer对象;
//方法1:通过按钮选择文件
<input type="file" id="fileId">
<script>
let fileObj = document.getElementById('fileId')
fileObj.onchange = (e) => {
// 获取文件-返回的是一个file文件对象
console.log(e.target.files[0])
}
</script>
--------------------
//方法2:通过拖拽选择文件
.dropArea{
width: 300px;
height: 300px;
border:pink 1px solid;
}
<div class="dropArea" id="dropID"></div>
<script>
let dropObj = document.getElementById('dropID')
// 拖拽事件-默认是禁止的
dropObj.ondragover = (e)=> {
// 阻止默认事件-允许元素/数据停留在该元素
e.preventDefault();
}
// 在拖拽过程中,释放鼠标时触发(拖拽结束事件)
dropObj.ondrop = (e) =>{
// 阻止默认事件
e.preventDefault()
// 获取文件-返回的是一个file文件对象
let file = e.dataTransfer.files;
console.log(file[0])
}
</script>