<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用FileReader接口读取文件</title> </head> <body> <script> function read(){ if(typeof FileReader=='undifined') //判断浏览器是否支持filereader { result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>"; return false; } var file=document.getElementById("imagefile").files[0]; if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件 { alert("请确保文件为图像文件"); return false; } var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function(e) { var result=document.getElementById("result"); result.innerHTML='<img src='+this.result+' alt=""/>' } } </script> <p> <label>请选择一个文件：</label> <input type="file" id="imagefile" /> <input type="button" value="读取图像" onClick="read();" /> </p> <div id="result" name="result"> <!-- 这里用来显示图片结果--> </div> </body> </html>
使用readAsDataURL预览图片
2022-11-17
133
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
代码如下
目录
相关文章
|
6月前
|
存储
算法
C#
|
6月前
|
JavaScript
容器
|
Android开发
|
小程序
JavaScript
|
图形学
|
Java
API
Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后，从事服务端WEB开发，就很少接触图片处理。有接触图片的，大多也就是图片的上传下载。所以，对Java处理图片相关的技术也都没怎么接触。
360
0
0
|
存储
前端开发
JavaScript
如何利用ps工具，裁量咱的素材小图标和如何获取到大小合适的素材图标呢（各自图标素材集中于一张png图片上）
如何利用ps工具，裁量咱的素材小图标和如何获取到大小合适的素材图标呢（各自图标素材集中于一张png图片上）
176
0
0
|
前端开发
JavaScript
HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。
在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。
1911
0
0
热门文章
最新文章
1
Java 生成 UUID
2
一文读懂 Serverless 的起源、发展和落地实践
3
Fiddler抓包：下载、安装及使用
4
用CodeViz绘制函数调用关系图(call graph)
5
阿里AI上岗双11服装车间，能识别头发丝直径十分之一的瑕疵
6
SpringBoot开发案例之整合Dubbo提供者(一)
7
Dubbo架构介绍
8
警惕垃圾邮件借加沙新闻进行钓鱼攻击
9
美国博客刊文发布NetApp StoreVault停产通知
10
IntelliJ IDEA 12 创建Web项目 教程 超详细版
1
通义灵码与云计算平台的融合：基础与概述
37
2
《深度解析：死锁的“前世今生”与防范之道》
31
3
《探秘程序崩溃：核心转储（Core Dump）分析全攻略》
34
4
今日 AI 开源｜共 12 项｜开源的DIY健康追踪项目，基于低成本的智能戒指构建私人的健康监测应用
38
5
Open Interpreter：AI 赋能终端！在终端中对话AI模型进行编程，通过运行代码来完成各种计算机操作任务
31
6
「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
40
7
ai断点怎么做?
16
8
AI Shell：在命令行里“对话” AI ，微软推出将 AI 助手引入命令行的 CLI 工具，打造对话式交互命令行
19
9
ai怎么设计迷宫字体效果?
15
10
「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
29