使用readAsDataURL方法预览图片

最新推荐文章于 2023-08-09 23:47:57 发布
最新推荐文章于 2023-08-09 23:47:57 发布
阅读量1.2w 收藏 1
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/double215726/article/details/19154587
版权

使用FileReader接口的readAsDataURL方法实现图片的预览。

源代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readAsDataURL()
{
	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.οnlοad=function(e)
	{
		var result=document.getElementById("result");
		result.innerHTML='<img src="'+this.result+'" alt=""/>'
	}
	
}
</script>
</head>

<body>
<p>
	<label>请选择一个文件：</label>
	<input type="file" id="imagefile" />
	<input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
	<!-- 这里用来显示图片结果-->
</div>
</body>
</html>


三明自
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript使用readAsDataUrl方法预览图片
10-19
主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5中FileReader 的使用
12-06 700
FileReader：读取文件内容 1.readAsText(): 读取文本文件（可以使用txt打开的文件）返回文本字符串，默认编码为UTF-8 2.readAsBinaryString(): 读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件的内容，获取二进制数据传递给后台，后台接收了数据之后再将数据存储 3.readAsDateU...
浏览器中处理上传大文件——FileReader.readAsArrayBuffer()方法
weixin_44860226的博客
03-27 4694
平常从客户端上传文件到服务器端，只需要读取 input 的 File 对象，然后将其塞到 FormData 对象中，然后使用 ajax 发送到服务器端，服务器端会有配套的读文件和写文件的操作。现在遇到一个问题，就是在本地一个进程中，浏览器和其他代码间数据的发送，因为不经过 HTTP，这时候只有将文件的信息读取出来，然后通过二进制或是 base64 编码的格式发送。HTML5 的 FileReader API 可以在浏览器对用户本地文件进行读取，但是在使用的过程中又遇到了新的问题，比如通过 FileReade
FileReader
m0_46641774的博客
09-20 1万+
FileReader
php读图片文件到js,JavaScript中readAsDataURL读取图像文件的实现方法介绍
weixin_33648177的博客
03-11 343
这篇文章主要为大家详细介绍了JavaScript使用readAsDataURL读取图像文件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求...
filereader读取文件c语言,FileReader.readAsDataURL()函数的使用【转】
weixin_34015347的博客
05-24 860
readAsDataURL方法会读取指定的Blob或File对象。读取操作完成的时候，readyState会变成已完成DONE，并触发[loadend](https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/loadend "/zh-CN/docs/Web/Reference/Events/loadend")事件，同时...
JavaScript使用FileReader实现图片上传预览效果
12-08
为了读取文件中的数据，FileReader提供了如下几个方法。 readAsText(file,encoding)：以纯文本的方式读取文件，将读取到的文件保存到result属性中。 readAsDataURL(file)：读取文件并将文件以数据URI的形式保存在...
JavaScript实现无刷新上传预览图片功能
12-11
无刷新上传功能如何实现？手写无刷新上传要用到两个东西...input type="file" name="file" id="file" onchange="readAsDataURL()" /> <input type="button" value="提交" onclick="doUpload()" /> </for
nodejs 图片预览和上传的示例代码
01-20
前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用文件或Blob...
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 4万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
文件转换、文件压缩、文件加密
qq_36582776的博客
06-15 386
一、file(文件流、二进制流) -> base64、base64 -> file atob() 方法用于解码使用 base-64 编码的字符串。base-64 编码使用方法是 btoa() 。 2.blob->具体文件类型（用于从服务器端获取的数据）、文件->blob（用于从文本读取文件） 3.blob用formData进行传输 二、文件压缩JSZip、三、文件加密MD5、RSA、RES：加密 签名：防篡改......
html5 使用FileReader对象的readAsDataURL方法来读取图像文件
08-20 4608
使用FileReader对象的readAsDataURL方法来读取图像文件 jquery2000 2014-4-3 13:52:27 阅读(3234) 评论(0) FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您
FileReader 中的readAsDataURL 选择图片文件后即使预览图片
qq_42705221的博客
11-05 2万+
1：FileReader : 读取文件内容             readAsText() 读取文本文件，(可以使用Txt打开的文件)             readAsBinaryString(): 读取任意类型的文件，返回二进制字符串             readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件 ...
转载：使用FileReader对象的readAsDataURL方法来读取图像文件
dinaozao7247的博客
11-09 306
文章转载自：http://blog.okbase.net/jquery2000/archive/1296.html； FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务...
05-HTML5强大的新 API，01-文件 API
weixin_44077629的博客
03-09 130
HTML5 API 1、文件 API 2、拖放 API 3、地理定位（获取地理位置信息） 4、web 存储 （在本地存储用户的浏览数据） 5、Web SQL 6、应用程序缓存 （离线应用程序） 7、Web Sockets （通信API） 8、SSE 9、Web Workers （使用Web Workers处理线程） 1、文件 API <input type = "fil...
关于文件读取 FileReader
weixin_47505105的博客
03-04 330
关于文件读取的FileReader的用法以及代码示例
使用FormData传递表单数据
neoveee的博客
11-28 4993
今天遇到一个需求：通过xhr发送图片，并获取请求的返回值，需要用到FormData对象，具体的实现代码如下： var xhr = new XMLHttpRequest(),//新建一个xhr对象 input=document.getElementById("input"),//获取监听文件上传的input节点 formData = new FormData(
Blob/FileReader/ArrayBuffer/文件上传/Uint16Array
song854601134的博客
10-25 1954
自从提供了video标签，在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址，在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次放假回家，就会有亲戚找我帮忙从一些视频网站上下东西）。目前的服务商大部分都支持referer防盗链。其原理就是在访问资源时，请求头会带上发起请求的页面地址，判断其不存在（表示直接访问图片地址）或不在白名单内，即为盗链。
URL.createObjectURL() 和 FileReader.readAsDataURL() 的区别，大文件下载浏览器崩溃的处理方案
最新发布
前端笔记——放弃很容易,但坚持一定很酷
08-09 1358
背景：大文件下载（2G以上）。研发和测试环境都没有问题，到现场大文件下载浏览器内存崩溃了。一开始使用下载大文件会导致浏览器崩溃，使用之后问题解决。
前端预览图片
05-31
在前端预览图片，可以使用 HTML5 中的 `FileReader` 对象来读取本地文件，并通过 `URL.createObjectURL` 方法生成一个 URL，然后将这个 URL 赋值给 `img` 标签的 `src` 属性，即可实现图片预览。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Image Preview</title> </head> <body> <input type="file" id="image-file" accept="image/*"> <br> <img id="image-preview" src="" alt="Image Preview"> <script> const fileInput = document.getElementById('image-file'); const imagePreview = document.getElementById('image-preview'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (!file || !file.type.match('image.*')) { return; } const reader = new FileReader(); reader.onload = (event) => { imagePreview.src = URL.createObjectURL(file); }; reader.readAsDataURL(file); }); </script> </body> </html> ``` 在这个示例中，我们创建了一个 `<input type="file">` 元素，用于选择图片文件。然后通过 JavaScript 监听 `change` 事件，读取选择的文件，并使用 `URL.createObjectURL` 方法生成一个 URL，将这个 URL 赋值给 `<img>` 标签的 `src` 属性，即可在页面上显示预览图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值