JS+HTML5 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相关内容感兴趣的读者可查看本站专题：《JavaScript扩展技巧总结》、《JavaScript文件与目录操作技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript HTML5文件上传FileReader API

    文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php)

    File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的. 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成. File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中

  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食. 前端对文件进行base64编码并通过ajax向服务器

  • 基于JavaScript FileReader上传图片显示本地链接

    基于JavaScript FileReader上传图片显示本地链接

    简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 页面中多个,上传

  • JavaScript html5利用FileReader实现上传功能

    JavaScript html5利用FileReader实现上传功能

    本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分 <h2>文件上传演练</h2> <div id="result"> <!-- 这里用来显示读取结果 --> <div id="inResult"> <div id="inImgs"></div> <div id="imgInfo&quo

  • javascript结合fileReader 实现上传图片

    关于File API这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量. 复制代码 代码如下: function getImgSrc(target, callback) {     if (window.FileReader) {         var oPreviewImg = null, oFReader = new window.FileR

  • JS+HTML5 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]) <inp

  • JS+HTML5 canvas绘制验证码示例

    JS+HTML5 canvas绘制验证码示例

    本文实例讲述了JS+HTML5 canvas绘制验证码.分享给大家供大家参考,具体如下: css样式: <style> body{ text-align: center; } canvas{ background:#ddd; } </style> HTML部分: body中添加标签canvas: <canvas id="c3"></canvas> js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h =

  • js的Object.assign用法示例分析

    本文实例讲述了js的Object.assign用法.分享给大家供大家参考,具体如下: 作用 Object.assign() 用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, -sources) 参数: target: 目标对象 sources:任意多个源对象 返回值 返回值为合并属性后的目标对象,即target. 示例1(属性值是值类型) var obj1 = { a:1 }; var obj2 ={ b:2 }

  • JS回调函数简单用法示例

    JS回调函数简单用法示例

    本文实例讲述了JS回调函数简单用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>testCallBack.html</title> </head> <body> <

  • vue.js中$watch的用法示例

    前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m

  • php使用变量动态创建类的对象用法示例

    本文实例讲述了php使用变量动态创建类的对象.分享给大家供大家参考,具体如下: 这是一个能用变量动态创建类的对象的用法,就是根据$pay_code变量值来创建对象. 例如下例就是创建类T的一个对象$payment.然后就可以使用了.咋一看像是个新的知识点,其实不然,只不过是编程中的一个技巧而已. $pay_code='T'; $payment = new $pay_code(); echo $payment; echo $payment->ep(); class T{ function ep()

  • js setTimeout opener的用法示例详解

    复制代码 代码如下: $("#saveInfo").show(); setTimeout( '$("#saveInfo").hide();',3000); if(opener&& !opener.closed){ opener.location.reload(true); } setTimeout : 延迟多长时间执行什么方法,具体使用:http://www.jb51.net/article/35535.htm opener: 指parent表示父窗

  • Android webview与js交换JSON对象数据示例

    Android webview与js交换JSON对象数据示例

    最近几个项目的测试结果,Android无法主动通过调用 webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 这种方式将jsonobject类型的data传给js,因为js那边得到就是一个string的对象. 与此同时,js主动调用android的对象方式,android也无法返回给js一个jsonobject,需要js做一下转换,例如: Android 代码: 复制代码

  • js中this对象用法分析

    this对象是在函数运行时,基于函数的执行环境绑定的. 其实这句话的本质就是,谁调用了函数,this就指向谁 具体的来说,通常有以下几种情况: 全局函数 在全局环境中,this指向Window //例子1 function A() { console.log(this) } A();//Window 上面的例子很简单,函数A在全局环境中执行,也就是全局对象Window调用了函数.此时this指向Window 对象方法 作为对象方法调用时,this指向调用该方法的对象 //例子2 var b =

随机推荐