zoukankan      html  css  js  c++  java
  • new FileReader() 文件上传

    1:FileReader : 读取文件内容

    readAsText(): 读取文本文件,(可以使用Txt打开的文件)
    readAsBinaryString(): 读取任意类型的文件,返回二进制字符串
    readAsDataURL: 方法可以将读取到的文件编码成DataURL ,可以将资料(例如图片、excel文件)内嵌在网页之中,不用放到外部文件
    abort: 中断读取

    2:FileReader : 捕获读取文件的状态

    onabort:读取文件断片时触发
    onerror:读取文件错误时触发
    onload:文件读取成功时触发
    onloadend:文件读取完毕之后,不管成功还是失败触发
    onloadstart: 开始读取文件时触发
    onprogress:读取文件过程中触发

    使用:

    html部分:

    <form action="http://www.baidu.com" enctype="mulitipart/form-data">
      <input id="ipnut_file" type="file" name="fileImg" accept="image/*">
      <img id="view_img" src="">
    </form>
    

    js部分:

    const viewImg = document.getElementById('view_img');
    const files = document.getElementById('ipnut_file').files;
    if(files && files[0]) {
      if(window.FileReader) {
        const reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = () => {
          viewImg.setAttribute('src', reader.result);
        }
      }
    }
    
    
  • 相关阅读:
    [USACO5.3]校园网Network of Schools
    [USACO13OPEN]照片Photo

    flask的orm框架----------Flask-SQLAlchemy应用
    Flask-session用法
    flask--自定义auth模块
    flask -falsk_script用法
    Flask-SQLAlchemy数据库
    flask--session源码解析
    flask-源码请求源码
  • 原文地址:https://www.cnblogs.com/xuchao-blogs/p/14831617.html
Copyright © 2011-2022 走看看