发布于 2017-05-23 14:47:54 | 90 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

HTML5超文本标记语言

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五重大修改。


这篇文章主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。



相关阅读 :
JS+HTML5 FileReader对象用法示例
HTML5-列表的应用示例
html meta标签 的用法示例讲解
html5 canvas arcTo()使用示例
JS HTML5拖拽上传图片预览
JS HTML5实现拖拽移动列表效果
js+HTML5基于过滤器从摄像头中捕获视频的方法
js+HTML5实现视频截图的方法
js HTML5手机刮刮乐代码
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
JS+HTML5实现上传图片预览效果完整实例【测试可用】
HTML5-链接示例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务