HTML5文件读取接口

文件读取接口

通过FileReader API 操作文件读取操作
  内部方法
    readAsText();读取文本文件，返回字符串，默认UTF-8编码
    readAsBinaryString();读取任意类型的文件，返回二进制数据，一般用于将数据传给后台
    ，后台接收数据之后  做存储功能
    readAsDataURL();用于读取文件的一段data开头，这段字符串的本质就是DataURL，
      一般用于将本地文件嵌入到文档的方案，可以用于展示本地的图片的实现，
      DataURL是将资源转换为base64编码的字符串形式，并且将这段内容直接存储在url中
      ，可以优化网站加载速度和执行效率，一般DataURL可以存储图像或者能够嵌入到文档的文本格式
    abort（）；中断读取

测试:本地读取文件并实现即时预览图片

功能

  即时
    用户选择完图片，就立即做预览处理  事件选用change事件
  预览
    通过文件读取对象的readAsDataURL(),完成

<input type="file" name="file">
input文件的数据保存在input.files中，这是一个数组，
展示 
<img >

  let input=document.querySelect("input");
  input.onchange=function(){
    创建文件对象
    let reader=new FilrReader();
    下面的函数没有返回值
    传入读取的参数（Blob）二进制大文件，一般来说是图片，或者其他可以嵌入文档的类型
    reader.readAsDataURL(this.files[0]);
    虽然这个函数没有返回值，但是它读完数据之后会将数据保存在result中
    这个操作是一个异步操作，因为它会异步读取文件
    /*获取数据*/
      FileReader提供了完整的事件模型，用来捕获读取文件时的状态
        onabort:读取文件发生读取中断时触发
        onerror:读取文件发生错误时触发
        onload:读取完文件成功时触发
        onloadstart：读取文件开始时触发
        onprogress:读取文件过程持续触发
    

    我们监听onload事件，处理读取完的数据
    reader.onload=function(reader,result){
      //图片中展示数据
      img.src=reader.result;
    }

  }
  

拖拽接口

地理定位

Web存储

应用缓存接口

多媒体接口