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 相关文章推荐
jQuery之排序组件的深入解析
Jun 19 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
jstree的简单实例
Dec 01 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
JS中的防抖与节流及作用详解
Apr 01 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php中socket的用法详解
2014/10/24 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
讲解Python中的递归函数
2015/04/27 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
师范应届生教师求职信
2013/11/05 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
安全生产责任书
2014/03/12 职场文书
毕业设计说明书
2014/05/07 职场文书
农村党员一句话承诺
2014/05/30 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
通知的写法
2015/04/23 职场文书
干部考核工作总结2015
2015/07/24 职场文书
超市主管竞聘书
2015/09/15 职场文书