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 对象
通过 fileInput 的 dom 对象 onchange 对象, 获取原始的 File 对象
通过 FileReader 中 [readAsDataURL] [readAsArrayBuffer] [readAsText]一种读取原始 File对象
通过 FileReader 的 onload 方法获取来继续完成后的操作

Keep learning