H5 新特性之 fileReader 实现本地图片视频资源的预览

大家好 !!  又见面了， 今天我们来搞一搞   H5的新增API    FileReader     真是一个超级超级方便的API呢！！！很多场景都可以使用..........

 

我们先不赘述MDN文档里的内容， 我们从  1  到  0， 从 一个 小Demo 入手 开始 了解 它；

 

请开始你的表演：

 

是不是简单又炫酷， 我们从头开始来看， 界面分三个部分

1   文件input框

2    预览部分

3   进度条

 

HTML代码：

<div class="file-preview">
    <div class="add" style="width: 50px;height: 50px;line-height: 50px;text-align: center;background-color: #eeeeee;position: relative;" >
        +
        <input type="file" id="fileInput" style="opacity: 0;z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;">
    </div>

    <div class="image-box" style="margin-top: 20px;height: 200px;line-height: 0">
        <img src="" alt="" style="max-height: 200px;display: none" id="image">
        <video src="" controls style="display: none;" height="200"></video>
    </div>

    <div class="progress" style="background-color: #cccccc;width: 700px;height: 20px;position: relative;text-align: center;line-height: 20px;margin-top: 20px;">
        <span id="percent">0%</span>
        <div class="loading" style="position: absolute;height: 100%;background-color: blue;top: 0;left: 0;"></div>
    </div>
</div>

 

HTML结构应该很清晰吧，  我们重点讲js部分

 

First      获取要操作的Dom元素

　　　　

var img = document.querySelector('#image');   // 获取image

var video = document.querySelector('video');  //  获取video

var input = document.querySelector('#fileInput'); // 获取input

var loading = document.querySelector('.loading'); // 获取进度条

var percent = document.querySelector('#percent'); // 获取百分比

var reader = new FileReader(); // 初始化一个 FileReader

var file = {}; // 文件对象

var fileType = ''; //  文件类型

 

Second    监听input 上的change事件   ，  获取选择的本地文件     

input.addEventListener('change', function(event) {
    file = event.target.files[0];    // 获取文件对象
    video.style.display = 'none';   // 隐藏video
    img.style.display = 'none';     //  隐藏image
    percent.innerHTML = '0%';       //  初始化百分比
    loading.style.width = '0px';    //  初始化进度条
    if (event.target.files.length) {
        fileType = file.type.split('/')[0];  // 获取文件类型
        reader.readAsDataURL(file);   // 开始读取文件
    }
});

　fileReader 上  　readAsDataURL() 方法是把文件 转换成 一个 base64编码的字符串，可以放在图片或者视频的src里， 最常用

　　　　　　　　readAsText()  把文件 转换成 一个特定编码格式的字符串， 没有指定编码格式默认为utf-8  常用

　　　　　　　　readAsBinaryString()  把文件 转化成一个二进制数据  了解即可

　　　　　　　　readAsArrayBuffer() 把文件 转换成一个 ArrayBuffer 数据  了解即可

 

　这些方法转换后的数据都在FileReader.result上    ，还有一个终止读取的方法   abort（）

 

　　继续正题.................

Third    文件开始读取后    FileRead 给我们提供了   读取   状态  的 事件    ， 我们绑定这些事件来看看效果：

reader.onabort = function (e) {   // 终止读取触发     abort()方法会触发它
    console.log('abort')
};

reader.onloadstart = function (e) {  // 开始读取触发
    console.log('start')
};

reader.onprogress = function (e) {  // 读取过程触发  可以获得读取进度

    percent.innerHTML = (e.loaded/e.total).toFixed(2) * 100 + '%';  // 进度百分比

    loading.style.width = (e.loaded/e.total) * 700 + 'px';   // 进度百分比 乘  总宽度  等于  进度条的宽度
};

reader.onload = function (e) {   // 读取结束并且读取成功触发  在这里可以拿到result
    console.log('loaded');
    loading.style.width = '700px';   // 进度条完成
    percent.innerHTML = '100%';     // 百分比完成
    if (fileType === 'video') {
        video.src = this.result;
        video.style.display = 'block'   // 显示视频
    } else if (fileType === 'image'){
        img.src = this.result;
        img.style.display = 'block'  // 显示图片
    }
};

reader.onloadend = function (e) {  // 读取结束触发 ， 在load之后
    console.log('end')
};

 这里要注意一点，  load 是读取成功触发，   loadend 不管读取成功或者失败都会触发，

所以我们在load  里拿到转化结果。

 

到此   demo  就做完啦！！！！！！！

同学们学会了吗，

最后提一嘴，  虽然FileReader 很好用     ，  但是  ————————————

————————   base64转码很费时间， 如果文件非常大的话， 很慢。。。。。

还有可能转不出来。。。。。

这种情况  推荐使用    URL.createObjectURL（file）创建一个DOMString, 直接使用这个DOMString 就好啦，

使用完记得 使用   URL.revokeObjectURL()   清掉 

本期讲解到此结束， 我们下期再见  。