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 相关文章推荐
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
vue项目实现分页效果
Mar 24 Vue.js
微信小程序实现图片轮播及文件上传
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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
大学生新闻专业个人自我评价
2013/11/12 职场文书
有个性的自我评价范文
2013/11/15 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
校园环保标语
2014/06/13 职场文书
2014年应急工作总结
2014/12/11 职场文书
爱国主义电影观后感
2015/06/18 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS