浏览器临时显示图片文件的两种方法

最新推荐文章于 2024-04-15 17:51:07 发布

mofle

最新推荐文章于 2024-04-15 17:51:07 发布

阅读量975

点赞数

分类专栏：技术文章标签：图片预览

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_41457552/article/details/81480714

版权

本文介绍了在浏览器环境中实现图片预览的两种常见方法。第一种方法利用URL.createObjectURL()将选取的文件转换为可显示的链接，第二种方法通过FileReader读取文件并将其转换为base64编码。提供了相关的HTML和JavaScript源码，便于学习和参考。

摘要由CSDN通过智能技术生成

我们经常会遇到,填写资料上传图片,要预览图片的需求

以下提供两种方法在浏览器中临时预览上传的图片,

附上源码,以供学习探讨:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

img {

overflow: auto;

}

</style>

</head>

<body>

<form action="">

<input type="file" id="files">

<br>

<img src="" alt="" id="img">

</form>

</body>

<

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。