html5&css&js代码 012 我的像册
以下是一个简单的HTML、CSS和JavaScript代码示例，用于创建一个可以上传照片并展示的“我的相册”页面。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<h2>My Gallery</h2>
<input type="file" id="imageUpload" multiple>
<div id="imagePreview"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
.gallery {
width: 80%;
margin: 0 auto;
text-align: center;
}
.gallery img {
width: 150px;
margin: 10px;
}
#imagePreview {
display: flex;
flex-wrap: wrap;
justify-content: center;
}JavaScript (script.js):
document.getElementById('imageUpload').addEventListener('change', handleFiles);
function handleFiles() {
let files = this.files;
let imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = ''; // Clear the preview
for (let i = 0; i < files.length; i++) {
let file = files[i];
let imageType = /image.*/;
if (file.type.match(imageType)) {
let img = document.createElement('img');
img.file = file;
img.classList.add('gallery__image');
// Preview the image
let reader = new FileReader();
reader.onload = (e) => img.src = e.target.result;
reader.readAsDataURL(file);
imagePreview.appendChild(img);
}
}
}这个示例中，用户可以通过点击<input>元素选择图片文件。当文件被选中后，handleFiles函数会被触发，读取这些文件并逐个预览显示在<div id="imagePreview">中。这个简单的例子演示了如何使用HTML5的文件API来处理用户上传的文件，并使用JavaScript和CSS进行展示。
评论已关闭