web图片预览详情及file和readAsDataURL

最新推荐文章于 2024-06-01 11:10:28 发布

Jinjinjinx

最新推荐文章于 2024-06-01 11:10:28 发布

阅读量432

点赞数

分类专栏： ES6 文章标签： js

本文链接：https://blog.youkuaiyun.com/Jinjinjinx/article/details/99469586

版权

在项目中遇到需要在上传图片时实现预览的功能。通过学习和实践，了解到File API中的file接口和readAsDataURL方法可以解决此问题。file接口提供了文件的相关信息，如最后修改时间、名称等；而readAsDataURL方法读取文件并返回data URL，使图片能在页面上预览。通过使用这些方法，成功实现了上传图片并预览的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写自己的项目的时候遇到了一个问题，我需要能够在页面上预览我所添加的图片。通过向别人学习，自己也总结了一些知识点，解决了问题之后，现在做一个总结，代码如下

var imgUrlData;
$("#imgFile").change(function(){
	const file = this.files[0];   //获取到当前图片
	let reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(){
		imgUrlData = reader.result;
		$("#zzimg").attr('src', imgUrlData);
	}
})

情况是这样子：我在做的是一个商家的页面，需求中有一个是要求商家上传商品的时候，能够上传图片并在上传界面预览。上述代码中的 imgFile 是input 的一个id。#zzimg是预先设置好的图片的id。html如下
在这里插入图片描述
首先说一下这边的file，通俗易懂的说file是一个接口，提供相关的文件信息，并允许网页中的javascript访问其内容。（形象的来说我们这边的files是file的一个实例，当我们给input框设置type值为file时我们可以调用这个方法~~仅个人理解，望大佬们指正），然后获取到这个图片。下面我们先详细的讲一下file
**