zoukankan      html  css  js  c++  java
  • JavaScript FileReader读取文件

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>File Reader 文件上传</title>
    </head>
    
    <body>
        <input type="file" class="file-input">
        <img src="" class="img" style="400px;height:400px;">
    
        <script>
            // 获取文件
            let fileInput = document.querySelector('.file-input');
            // 获取图片
            let imgSrc = document.querySelector('.img')
            imgSrc.style.display = 'none'
    
            // 创建 FileReader 对象
            let fileReader = new FileReader();
    
            // 文件onchange获取
            fileInput.onchange = function(e) {
                // 获取原生 File 对象
                let file = event.target.files[0]
    
                // fileReader.readAsArrayBuffer(file) // 以二进制读取文件对象
                // fileReader.readAsText(file) //以字符串形式表示读取到的文件内容
                fileReader.readAsDataURL(file) // 以data:URL 格式的字符串以表示读取文件的内容
            }
    
            // 读取操作完成后获取
            fileReader.onload = function(e) {
                console.log(e.target.result)
                imgSrc.src = e.target.result
                imgSrc.style.display = ''
            }
        </script>
    </body>
    
    </html>
    

    步骤

    • 创建 FileReader 对象
    • 通过 fileInputdom 对象 onchange 对象, 获取原始的 File 对象
    • 通过 FileReader 中 [readAsDataURL] [readAsArrayBuffer] [readAsText]一种读取原始 File对象
    • 通过 FileReaderonload 方法获取来继续完成后的操作
    Keep learning
  • 相关阅读:
    基于注解的springmvc开发
    判断两数之和
    redux-saga call 和 fork的区别
    滚动轴滚动方向判断
    原生方法scrollTo支持滚动特效
    npm下载包失败的几个原因
    关闭vscode打开新文件自动关闭预览文件功能
    在本地文件当中package.json的作用
    解决crlf 和 lf不同带来的冲突问题
    package-lock.json 文件的作用
  • 原文地址:https://www.cnblogs.com/leslie1943/p/13594950.html
Copyright © 2011-2022 走看看