使用FileReader对象的readAsDataURL方法来读取图像文件

来源：互联网发布：淘宝服饰平铺拍摄布光编辑：程序博客网时间：2024/05/24 06:39

readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。

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接口

0 0