帮我写一个照片上传可以查看照片删除照片功能的html的代码
当然可以。下面是一个完整的HTML示例，它包含了上传图片、显示图片和删除图片的功能。用户上传图片后，图片会显示在页面上，并且每个图片旁边都有一个删除按钮，用户可以点击删除按钮来删除图片。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload and Delete Example</title>
<style>
.image-container {
position: relative;
display: inline-block;
margin: 10px;
}
.delete-button {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-color: red;
color: white;
border: none;
padding: 5px;
margin: 0;
}
img {
width: 200px;
height: auto;
margin-top: 5px;
}
</style>
</head>
<body>
<!-- 图片上传 -->
<label for="imageInput">上传图片：</label>
<input type="file" id="imageInput" name="image" accept="image/*" multiple onchange="previewImages(this)">
<br>
<br>
<!-- 显示图片的区域 -->
<div id="imageArea">
<!-- 图片会显示在这里 -->
</div>
<script>
// 预览图片的函数
function previewImages(input) {
if (input.files) {
for (let i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
var imgElement = document.createElement('img');
imgElement.src = e.target.result;
imgElement.style.width = '200px'; // 设置图片宽度
imgElement.style.height = 'auto'; // 设置图片高度
var deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.className = 'delete-button';
deleteButton.onclick = function() {
this.parentElement.parentElement.remove();
};
// 创建容器并添加到页面
var container = document.createElement('div');
container.className = 'image-container';
container.appendChild(imgElement);
container.appendChild(deleteButton);
document.getElementById('imageArea').appendChild(container);
};
reader.readAsDataURL(input.files[i]);
}
}
}
</script>
</body>
</html>
```
### 解析
1. **HTML部分**：
- `<input type="file" id="imageInput" name="image" accept="image/*" multiple onchange="previewImages(this)">`：允许用户选择多个图片文件，并在文件选择后触发`previewImages`函数。
- `<div id="imageArea">`：用于显示用户上传的图片。
2. **CSS部分**：
- `.image-container`：定义了图片容器的样式，包括位置、显示方式和边距。
- `.delete-button`：定义了删除按钮的样式，包括位置、背景颜色、文本颜色、边框和内边距。
- `img`：定义了图片的宽度和高度。
3. **JavaScript部分**：
- `previewImages(input)`函数：在用户选择图片文件后进行处理，为每个文件创建一个预览图像，并在每个图片旁边添加一个删除按钮。删除按钮绑定了点击事件，点击后删除对应的图片和容器。
这样，用户就可以上传图片、查看图片并删除图片了。
AI智能问答网
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用创作工场，更聪明、更完整、更原创！