帮我写一个照片上传可以查看照片删除照片功能的html的代码

发布于 2024-09-27 00:00:27

当然可以。下面是一个完整的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>

解析

HTML部分：
- <input type="file" id="imageInput" name="image" accept="image/*" multiple onchange="previewImages(this)">：允许用户选择多个图片文件，并在文件选择后触发previewImages函数。
- <div id="imageArea">：用于显示用户上传的图片。
CSS部分：
- .image-container：定义了图片容器的样式，包括位置、显示方式和边距。
- .delete-button：定义了删除按钮的样式，包括位置、背景颜色、文本颜色、边框和内边距。
- img：定义了图片的宽度和高度。
JavaScript部分：
- previewImages(input)函数：在用户选择图片文件后进行处理，为每个文件创建一个预览图像，并在每个图片旁边添加一个删除按钮。删除按钮绑定了点击事件，点击后删除对应的图片和容器。