html5 FileReader 方法

FileReader的接口方法

FileReader的接口方法有四个，其中三个用来读取文件，另一个用来终端读取。无论读取成功或者失败。方法并不会返回读取结果。这一结果存储在result属性中。
readAsBinaryString(file): 将文件读取成二进制文件
readAsText(file[,enconing]): 将文件读取为文本
readAsDataURL(file): 将文件读取为DataURL。
abort(none): 中断读取操作

FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
onabort：中断加载
onerror：出错是触发
onloadstart：开始读取时触发
onprogress：正在读取
onload：读取成功
onloadend：读取完成，无论成功或者失败都会被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

</head>
<body>
    <input type="file" name="test" id="" class="input">
    <img src="" alt="" height="200" width="300" class="img">
    <button class="show-img">预览图片</button>
    <button class="show-bit-btn">读取二进制</button>
    <div class="show-bit"></div>
    <script>
         var fileInput = document.querySelector('.input');
         var img = document.querySelector('.img');
         var showBtn = document.querySelector('.show-img');
         var showBitBtn = document.querySelector('.show-bit-btn');
         var showBitDiv = document.querySelector('.show-bit');

         //判断浏览器是否支持FileRader接口
        if (typeof FileReader == 'undefined') {
            alert('哈哈，土鳖，你的浏览器不支持FileReader')
            fileInput.setAttribute('disabled', 'disabled')
        }

        var file;

        //预览图片
        fileInput.addEventListener('change', function () {

                file = this.files[0];

             }, false)
             console.log('helo')
        showBtn.addEventListener('click', function () {
            if (typeof file == 'undefined') {
                alert('请先选择图片')
                return
            }
            var reader = new FileReader();
            reader.addEventListener('load', function () {
                    console.log('reader', reader)
                    img.src = reader.result;
                }, false)

            reader.readAsDataURL(file)
        })

        //读取二进制文件 读取text文件和二进制文件爱你相同，只需要提换方法即可
        showBitBtn.addEventListener('click', function () {
            if (typeof file == 'undefined') {
                alert('请先选择图片')
                return
            }
            var reader = new FileReader();
            // reader.readAsBinaryString
            reader.readAsBinaryString(file)
            reader.addEventListener('loadstart',function (){
                console.log('开始读取', this)
            })
            reader.addEventListener('progress',function (){
                console.log('读取中', this)
            })
            reader.addEventListener('load', function () {
                // 读取到的二进制文件展示出来
                showBitDiv.innerHTML = reader.result
            })
            reader.addEventListener('loadend',function (){
                console.log('读取结束', this)
            })
        })
    </script>
</body>
</html>

html5 FileReader 方法

FileReader的接口方法

FileReader接口事件

猜你喜欢