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

使用FileReader对象的readAsDataURL方法来读取图像文件readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIMEtype,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA……使用

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

readAsDataURL获取的base64字符串如下:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......

Jetbrains全家桶1年46,售后保障稳定

使用Img显示图像文件

若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个标签,再设定src属性为Data URL,再将<img>标签加入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接口

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/209988.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java基础语法(六)循环控制语句不得不说的那些事儿

    Java基础语法(六)循环控制语句不得不说的那些事儿

  • fcntl和ioctl_Liverpool fc

    fcntl和ioctl_Liverpool fc一、fcntlfcntl函数用于执行各种描述符控制操作;/*返回值:成功取决于cmd,失败返回-1;*定义:*/#includeintfcntl(intsockfd,intcmd,/*intarg*/);/*说明:*第三个参数可有可没有,根据需要给出;*/函数有下面5种功能:复制一个现有的描述符(cmd=F_DUPFD);获得/

    2022年10月30日
  • phpstorm2021.5 激活码[在线序列号]

    phpstorm2021.5 激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Databus简介「建议收藏」

    Databus简介「建议收藏」1.背景在互联网架构中,数据系统通常分为真实数据(source-of-truth)系统,作为基础数据库,存储用户产生的写操作;以及衍生数据库或索引,提供读取和其他复杂查询操作。后者常常衍生自主数据存储,会对其中的数据做转换,有时还要包括复杂的业务逻辑处理。缓存中的数据也来自主数据存储,当主数据存储发生变化,缓存中的数据就需要刷新,或是转为无效。这样架构自然而然的一个问题就是如何保障基础数

    2022年10月17日
  • linux经典教程_三阶魔方初级入门教程详细图解

    linux经典教程_三阶魔方初级入门教程详细图解一、Linux常用命令1.文件处理命令1.1目录处理命令1.2文件处理命令1.3链接命令2.权限管理命令2.1权限管理命令chmod2.2其他权限管理命令3.文件搜索命令3.1文件搜索命令find3.2其他文件搜索命令4.帮助命令4.1帮助命令5.用户管理命令5.1用户管理命令6.压缩解压命令6.1压缩解压命令7.网络命令7.1网络命令8.关机重启命令8.1关机重启命令二、文本编辑器-Vim…

    2022年10月13日
  • 面试 SQL整理 常见的SQL面试题:经典50题

    面试 SQL整理 常见的SQL面试题:经典50题目录​SQL基础知识整理:常见的SQL面试题:经典50题三、50道面试题2.汇总统计分组分析3.复杂查询sql面试题:topN问题4.多表查询【面试题类型总结】这类题目属于行列如何互换,解题思路如下:其他面试题:SQL基础知识整理:select查询结果如:[学号,平均成绩:组函数avg(成绩)]from从哪张表中查找数…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号