zoukankan      html  css  js  c++  java
  • 上传---FileReader

     let input=document.querySelector('#input)
     input.onchange=function(){
         // 1.获取文件
         // 此时this指input,console.dir(this)  this身上的相关方法,files中就是上传的文件
         // fl1可以获取文件名称,大小,类型等
         let fl1 = this.files[0];
         // 2.创建读取文件对象
         let fReader = new FileReader();
         // 3.读取文件
         fReader.readAsText(fl1);
         // 4.文件读取事件
         fReader.onload=function(){
         // 获取读取文件结果
            let result = fReader.result;
         }
         // 开始
        fReader.onloadstart=function(){
    	console.log(1)
        }
        // 结束
        fReader.onloadend=function(){
    	console.log(2)
        }
        // 进行中   处理progress事件。该事件在读取Blob时触发
        fReader.onprogress=function(){
            console.dir('onprogress')
        }
        // 被中断  
        fReader.onabort=function(){
            console.log(456)
        }
        // 发生错误
        fReader.onerror=function(){
            console.log(789)
        }
        fReader.onload=function(){
            console.log('onload')
        }
     } 
    
    • 要先创建new FileReader对象来读取文件

    • 通过fReader.readAsText(fl1)来读取上传的文件(readAsText是读取文本)

    • onloadstart,onload,onloadend,onabort,onerror各个环节对应触发事件

    fReader.readAsArrayBuffer()

    • 用来处理文件比较大的文件,可以进行切片处理传送门

    fReader.readAsBinaryString()

    • 2012年已被废除

    fReader.readAsDataURL()

    • 用于处理图片,base64

    fReader.readAsText()

    • 读取文本,限制300K,因为读取是将文件临时加载到内存中,太大浏览器会崩掉

    fReader.readAsBlob()

    • 待补充

    FileReader传送门

    blob和file互转,canvas切图传送门

  • 相关阅读:
    flex 弹性盒布局 移动端首页
    less+rem基础使用
    github 本地操作
    git 码云
    react基础知识
    css样式
    uni-app 知识点
    web app
    2019年一半已过,这些大前端技术你都GET了吗?- 下篇
    2019年大前端技术周刊-#31周
  • 原文地址:https://www.cnblogs.com/facy/p/14817053.html
Copyright © 2011-2022 走看看