前端JS 展示上传图片缩略图（本地图片读取）
发布人：shili8
发布时间：2025-03-12 07:17
阅读次数：0
**前端JS 展示上传图片缩略图**
在现代网页应用中，用户上传图片是非常常见的功能。然而，直接上传原始图片可能会导致页面加载速度变慢、占用大量服务器资源等问题。因此，我们需要对上传的图片进行处理，生成一个合适大小的缩略图，以便快速展示给用户。
在本文中，我们将使用JavaScript和HTML5 Canvas API来实现图片缩略图的展示功能。
###1. HTML结构首先，我们需要定义一个HTML结构来容纳我们的图片上传控件和缩略图展示区域。
html<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传与缩略图展示</title>
<style>
#image-container {
width:300px;
height:200px;
border:1px solid #ccc;
padding:10px;
}
#thumbnail-container {
width:100px;
height:100px;
border:1px solid #ccc;
padding:5px;
}
</style>
</head>
<body>
<h1>图片上传与缩略图展示</h1>
<!--上传控件 -->
<input type="file" id="image-input" accept=".jpg, .jpeg, .png">
<!-- 缩略图展示区域 -->
<div id="thumbnail-container"></div>
<script src="script.js"></script>
</body>
</html>
###2. JavaScript逻辑接下来，我们需要编写JavaScript逻辑来处理图片上传、生成缩略图并展示在页面上。
javascript// script.jsconst imageInput = document.getElementById('image-input');
const thumbnailContainer = document.getElementById('thumbnail-container');
// 监听文件输入控件的变化imageInput.addEventListener('change', (e) => {
const file = e.target.files[0];
// 检查是否是图片类型 if (!file.type.match(/(jpg|jpeg|png)$/)) {
alert('请上传jpg、jpeg或png格式的图片!');
return;
}
//读取本地图片 const reader = new FileReader();
reader.onload = (event) => {
const imageDataUrl = event.target.result;
//生成缩略图 const thumbnail = generateThumbnail(imageDataUrl);
// 展示缩略图 displayThumbnail(thumbnail, thumbnailContainer);
};
reader.readAsDataURL(file);
});
//生成缩略图函数function generateThumbnail(imageDataUrl) {
const image = new Image();
image.src = imageDataUrl;
return new Promise((resolve) => {
image.onload = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置缩略图大小 canvas.width =100;
canvas.height =100;
// 绘制缩略图 context.drawImage(image,0,0,100,100);
resolve(canvas.toDataURL());
};
});
}
// 展示缩略图函数function displayThumbnail(thumbnailUrl, container) {
const thumbnail = document.createElement('img');
thumbnail.src = thumbnailUrl;
container.innerHTML = '';
container.appendChild(thumbnail);
}
###3. 总结在本文中，我们使用JavaScript和HTML5 Canvas API实现了图片上传与缩略图展示的功能。通过读取本地图片、生成缩略图并展示在页面上，我们可以快速展示给用户，提高网页应用的性能和用户体验。
当然，这只是一个基本示例，你可以根据实际需求进行扩展和优化。
粤公网安备 44011102002787号