使用FileReader对象的readAsDataURL方法来读取图像文件
2017-04-19 16:29
786 查看
readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。
readAsDataURL获取的base64字符串如下:
使用Img显示图像文件
若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个标签,再设定src属性为Data URL,再将标签加入DOM之中,
例如以下范例所示:
参考:
使用FileReader对象的readAsDataURL方法来读取图像文件
FileReader用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。
FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法
调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象
调用 reader. readAsText, 则 result 为 字符串
调用reader. readAsDataURL, 则 result 为 DataURL, DataURL 可直接 赋值给 img.src
调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串
FileReader接口的使用示例:
参考:
HTML5学习之FileReader接口
readAsDataURL获取的base64字符串如下:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......
使用Img显示图像文件
若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个标签,再设定src属性为Data URL,再将标签加入DOM之中,
例如以下范例所示:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function ProcessFile(e) { var file = document.getElementById('file').files[0]; if (file) { var reader = new FileReader(); reader.onload = function (event) { var txt = event.target.result; var img = document.createElement("img"); img.src = txt;//将图片base64字符串赋值给img的src document.getElementById("result").appendChild(img); }; } reader.readAsDataURL(file); } function contentLoaded() { document.getElementById('file').addEventListener('change', ProcessFile, false); } window.addEventListener("DOMContentLoaded", contentLoaded, false); </script> </head> <body> 请选取一个图像文件: <input type="file" id="file" name="file"/> <div id="result"></div> </body> </html>
参考:
使用FileReader对象的readAsDataURL方法来读取图像文件
FileReader用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。
FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法
调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象
调用 reader. readAsText, 则 result 为 字符串
调用reader. readAsDataURL, 则 result 为 DataURL, DataURL 可直接 赋值给 img.src
调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串
FileReader接口的使用示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> var result = document.getElementById("result"); var file = document.getElementById("file"); //判断浏览器是否支持FileReader接口 if (typeof FileReader == 'undefined') { result.InnerHTML = "<p>你的浏览器不支持FileReader接口!</p>"; //使选择控件不可操作 file.setAttribute("disabled", "disabled"); } function readAsDataURL() { //检验是否为图像文件 var file = document.getElementById("file").files[0]; if (!/image\/\w+/.test(file.type)) { alert("看清楚,这个需要图片!"); return false; } var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload = function (e) { var result = document.getElementById("result"); //显示文件 result.innerHTML = '<img src="' + this.result + '" alt="" />'; } } function readAsBinaryString() { var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以二进制形式读入页面 reader.readAsBinaryString(file); reader.onload = function (f) { var result = document.getElementById("result"); //显示文件 result.innerHTML = this.result; } } function readAsText() { var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以文本形式读入页面 reader.readAsText(file); reader.onload = function (f) { var result = document.getElementById("result"); //显示文件 result.innerHTML = this.result; } } </script> <p> <label>请选择一个文件:</label> <input type="file" id="file"/> <input type="button" value="读取图像" onclick="readAsDataURL()"/> <input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/> <input type="button" value="读取文本文件" onclick="readAsText()"/> </p> <div id="result" name="result"></div> </body> </html>
参考:
HTML5学习之FileReader接口
相关文章推荐
- 使用FileReader对象的readAsDataURL方法来读取图像文件
- 使用FileReader对象的readAsDataURL方法来读取图像文件
- html5 使用FileReader对象的readAsDataURL方法来读取图像文件
- HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果
- FileReader除了有函数readAsDataURL,另外还有另外两个函数readAsBinaryString 和 readAsText,分别可以将选择的文件读取成二进制和文本格式
- JavaScript使用readAsDataURL读取图像文件
- 在使用FileReader.readAsDataURL()时,处理不能不能连续选择同一个文件的问题
- JavaScript使用readAsDataUrl方法预览图片
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
- ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- 使用readAsDataURL方法预览图片
- 获取sqlDataReader对象Read()方法读取流的字段值的四种方法
- SqlDataReader对象的NextResult方法读取存储过程多个结果集
- FileReader详解与实例---读取并显示图像文件 | JS Mix
- Java基础之读文件——使用通道随机读取文件(RandomFileRead)
- 【翻译自mos文章】在rac中,使用asmcmd命令从 文件系统 move system datafile 到asm磁盘组的方法
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- FileReader详解与实例---读取并显示图像文件
- java 使用相对路径读取文件File(类构造方法)