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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
浅谈javascript的分号的使用
May 12 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
Angular5.1新功能分享
Dec 21 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
Vue vm.$attrs使用场景详解
Mar 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 header函数使用教程
2013/09/05 PHP
php调用shell的方法
2014/11/05 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php如何获取Http请求
2020/04/30 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jQuery技巧总结
2011/01/01 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
vue.js绑定class和style样式(6)
2016/12/09 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python简单基础小程序的实例代码
2019/04/28 Python
python路径的写法及目录的获取方式
2019/12/26 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
MIS软件工程师的面试题
2016/04/22 面试题
成人继续教育实施方案
2014/03/01 职场文书
颁奖晚会主持词
2014/03/25 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
党支部工作总结2015
2015/04/01 职场文书