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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
python实现可变变量名方法详解
2019/07/01 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
教师实习期自我鉴定
2013/10/06 职场文书
医学院四年学习生活的自我评价
2013/11/06 职场文书
新闻发布会主持词
2014/03/28 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
授权委托书样本
2014/09/25 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
远程教育培训心得体会
2016/01/09 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android