JS+HTML5 FileReader对象用法示例


Posted in Javascript onApril 07, 2017

本文实例讲述了JS+HTML5 FileReader对象用法。分享给大家供大家参考,具体如下:

FileReader 实例中有四个方法来读取文件数据

1、readAsBinaryString(Blob|File)
2、readAsDataURL(Blob|File)
3、readAsText(Blob|File)
4、readAsArrayBuffer(Blob|File)

FileReader 实例包含很多事件(onerror, onprogress, onload[result]

<input name="file" id="uploadFile" />
var file = document.getElementById("uploadFile");
var bufferSize = 1024;
var pos = 0;
var onload = function(e) {
   console.log("Read", e.target.result);
   var img = document.createElement("img");
   img.src = e.target.result;
   img.width = 300;
   img.height = 300;
   document.body.appendChild(img);
};
var onerror = function() {}
var onprogress = function(e) {}
file.onchange = function() {
   if (file.files) file = file.files[0];
   while (pos < file.size) {
    var reader = new FileReader();
    reader.onload = onload;
    reader.onerror = onerror;
    /*reader.readAsText(file.slice(pos, bufferSize));
    pos += bufferSize; */
    reader.readAsDataURL(file);
    pos = file.size + 1;
   }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 #Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 #Javascript
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Flask之flask-script模块使用
2018/07/26 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python中return self的用法详解
2018/07/27 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
贯彻学习两会心得体会范文
2014/03/17 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
论文答谢词
2015/01/20 职场文书
学风建设主题班会
2015/08/17 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis