利用html、css、js制作一个可以由登录界面跳转而来的图片展示页面，在该页面要能够上传和下载图片，写出完整代码
时间: 2024-03-07 20:50:41 浏览: 18
好的，下面是一个基于 HTML、CSS 和 JS 实现的图片展示页面，包括登录界面、上传和下载图片的功能。
HTML 代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片展示页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 登录界面 -->
<div class="login-container">
<h1>欢迎来到图片展示页面</h1>
<form>
<div>
<label>用户名</label>
<input type="text" id="username-input">
</div>
<div>
<label>密码</label>
<input type="password" id="password-input">
</div>
<button type="button" id="login-button">登录</button>
</form>
</div>
<!-- 图片展示区域 -->
<div class="gallery-container">
<div class="upload-container">
<h2>上传图片</h2>
<form>
<input type="file" id="image-upload">
<button type="button" id="upload-button">上传</button>
</form>
</div>
<div class="gallery"></div>
</div>
<!-- 下载模态框 -->
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<img id="modal-image">
<div>
<a href="#" id="download-link">下载</a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码：
```css
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', sans-serif;
}
.login-container,
.gallery-container {
display: none;
width: 100%;
max-width: 800px;
margin: auto;
padding: 20px;
}
.login-container {
text-align: center;
}
.login-container h1 {
margin-top: 0;
}
.login-container form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.login-container form div {
display: flex;
flex-direction: column;
margin-bottom: 10px;
width: 100%;
}
.login-container form label {
font-weight: bold;
margin-bottom: 5px;
}
.login-container form input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
.login-container form button {
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.gallery-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.upload-container {
width: 100%;
margin-bottom: 20px;
}
.upload-container h2 {
margin-top: 0;
}
.upload-container form {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.upload-container input[type="file"] {
display: none;
}
.upload-container label {
display: block;
padding: 10px;
border: 1px solid #007bff;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.upload-container button {
margin-left: 10px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.gallery {
width: 100%;
}
.gallery img {
width: 100%;
max-width: 300px;
margin-bottom: 20px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 100px;
width: 80%;
max-width: 800px;
height: 80%;
max-height: 800px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
position: relative;
}
.modal-content .close {
position: absolute;
top: 0;
right: 0;
font-size: 30px;
font-weight: bold;
cursor: pointer;
color: #fff;
background-color: #007bff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content img {
width: 100%;
max-height: 80%;
object-fit: contain;
}
.modal-content div {
margin-top: 20px;
text-align: center;
}
.modal-content a {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.modal-content a:hover {
text-decoration: none;
}
```
JS 代码：
```js
// 登录界面
const loginContainer = document.querySelector('.login-container');
const usernameInput = document.querySelector('#username-input');
const passwordInput = document.querySelector('#password-input');
const loginButton = document.querySelector('#login-button');
// 图片展示区域
const galleryContainer = document.querySelector('.gallery-container');
const uploadContainer = document.querySelector('.upload-container');
const imageUpload = document.querySelector('#image-upload');
const uploadButton = document.querySelector('#upload-button');
const gallery = document.querySelector('.gallery');
// 下载模态框
const modal = document.querySelector('.modal');
const modalImage = document.querySelector('#modal-image');
const downloadLink = document.querySelector('#download-link');
const modalClose = document.querySelector('.close');
// 登录验证
loginButton.addEventListener('click', () => {
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
if (username === 'admin' && password === '123456') {
loginContainer.style.display = 'none';
galleryContainer.style.display = 'block';
updateGallery();
} else {
alert('用户名或密码错误！');
}
});
// 更新图片展示
function updateGallery() {
gallery.innerHTML = '';
fetch('http://localhost:3000/images')
.then(res => res.json())
.then(images => {
images.forEach(image => {
const img = document.createElement('img');
img.src = image.path;
img.alt = image.name;
img.addEventListener('click', () => {
modalImage.src = image.path;
downloadLink.href = image.path;
modal.style.display = 'block';
});
gallery.appendChild(img);
});
})
.catch(err => {
console.error(err);
alert('获取图片列表失败！');
});
}
// 上传图片
uploadButton.addEventListener('click', () => {
const file = imageUpload.files[0];
const formData = new FormData();
formData.append('image', file);
fetch('http://localhost:3000/images', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => {
alert('上传成功！');
updateGallery();
})
.catch(err => {
console.error(err);
alert('上传失败！');
});
});
// 关闭模态框
modalClose.addEventListener('click', () => {
modal.style.display = 'none';
});
// 点击模态框外部区域关闭模态框
window.addEventListener('click', event => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
```
注意：这段代码是一个示例，仅供参考，需要结合后端技术来完整实现上传和下载图片的功能。其中涉及到的 API 接口需要根据具体后端实现进行修改。
相关推荐
最新推荐
setuptools-58.0.3.tar.gz
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
变压器DGA溶解气体数据（357组）
包含六种故障类型：
中低温过热
高温过热
低能放电
高能放电
局部放电
正常
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111需要直接下载就可
电抗器设计软件.zip
电抗器设计软件
base.apk
base.apk
SM4-CTS代码实现及基本补位示例代码
代码参照openssl-3.3.0-alpha1，可独立运行。示例包含块加密，基本补位方式示例
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用matlab绘制高斯色噪声情况下的频率估计CRLB，其中w(n)是零均值高斯色噪声，w(n)=0.8*w(n-1)+e(n)，e(n)服从零均值方差为se的高斯分布
以下是用matlab绘制高斯色噪声情况下频率估计CRLB的代码：
```matlab
% 参数设置
N = 100; % 信号长度
se = 0.5; % 噪声方差
w = zeros(N,1); % 高斯色噪声
w(1) = randn(1)*sqrt(se);
for n = 2:N
w(n) = 0.8*w(n-1) + randn(1)*sqrt(se);
end
% 计算频率估计CRLB
fs = 1; % 采样频率
df = 0.01; % 频率分辨率
f = 0:df:fs/2; % 频率范围
M = length(f);
CRLB = zeros(M,1);
for
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。