html5 FileReader 方法

FileReader的接口方法

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

FileReader接口事件

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>

    <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>

你可能感兴趣的:(javascript知识,HTML5)