大家好 !!  又见面了, 今天我们来搞一搞   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()   清掉

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

H5 新特性之 fileReader 实现本地图片视频资源的预览的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  3. 用FileReader对象获取图片base64代码并预览

    MDN中FileReader的详细介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 用FileReader获取图片base ...

  4. 使用input选择本地图片,并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  5. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  6. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  7. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  8. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  9. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

随机推荐

  1. ImageMagick 使用经验

    from:http://community.itbbs.cn/thread/20402/ 1.如何用ImageMagic水平或垂直拼接图片 因为是分片下载的,现在只能用montage拼接图片列阵,但如 ...

  2. linux下安装apc

    wget htdtp://pecl.php.net/get/APC tar zxvf APC-3.1.3p.tgz cd APC-3.1.3p /usr/local/php/bin/phpize ./ ...

  3. js 对XML文件的保存与读取

    一.保存(在前端用js创建xml格式) function exportToXml(jsonStr){ var obj = eval('('+ jsonStr + ')'); var xmlDoc = ...

  4. 落入绝地求生的Python神仙,实现绝地求生无后座!

    叙述 绝地求生已经出来那么久了,大家应该都晓得如今的游戏情形很是差 .特别在高端局,神仙满天飞 搞得很多人类玩家很是没有游戏体验! 由于绝地求生的火爆,繁衍出许多外挂流传于各个地方.飞机上.网吧内,各 ...

  5. GitHub学习笔记:远程端的操控

    对于远端,当你新建一个项目的时候,需要在网页处新建,在新建项目的页面,会有一段提示你上传本地项目到此远端方法的代码,直接拷贝粘贴到git shell就可以解决问题,不再详述. 当你把代码上传到一个已经 ...

  6. STL-Vector源码剖析

    G++ ,cygnus\cygwin-b20\include\g++\stl_vector.h 完整列表 /* * * Copyright (c) 1994 * Hewlett-Packard Com ...

  7. UML类图10分钟快速入门 - From 圣杰

    虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰 原文地址:http://www.j ...

  8. 团队项目第二阶段个人进展——Day9

    一.昨天工作总结 冲刺第九天,完成图片的优化,与队友一起讨论如何合并并优化 二.遇到的问题 无 三.今日工作规划 合并后优化

  9. 40多行python代码开发一个区块链。

    40多行python代码开发一个区块链?可信吗?我们将通过Python 2动手开发实现一个迷你区块链来帮你真正理解区块链技术的核心原理.python开发区块链的源代码保存在Github. 尽管有人认为 ...

  10. Mysql主从方案的实现

    Mysql主从方案介绍 mysql主从方案主要作用: 读写分离,使数据库能支撑更大的并发.在报表中尤其重要.由于部分报表sql语句非常的慢,导致锁表,影响前台服务.如果前台使用master,报表使用s ...