文件处理:FileAPI

108 阅读1分钟

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>