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基础知识之数据类型
Aug 06 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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下批量挂马和批量清马代码
2011/02/27 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JS实现留言板功能
2017/06/17 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python高效编程技巧
2013/01/07 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
用Python开发app后端有优势吗
2020/06/29 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
村委会主任先进事迹
2014/01/15 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
实验教师岗位职责
2014/02/13 职场文书
六查六看自查材料
2014/02/17 职场文书
校庆标语集锦
2014/06/25 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
男人帮观后感
2015/06/18 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏