帮我写一个上传图片用户可以看见照片的和删除图片的html

发布于 2024-09-26 23:59:16

可以的，这里有一个简单的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;
    }

    .delete-button {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }
</style>
</head>
<body>

<!-- 图片上传 -->
<label for="imageInput">上传图片：</label>
<input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(this)">
<br>
<br>

<!-- 显示图片的区域 -->
<div id="imageArea">
    <!-- 图片会显示在这里 -->
</div>

<script>
// 预览图片的函数
function previewImage(input) {
    if (input.files && input.files[0]) {
        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'; // 设置图片高度
            imgElement.style.margin = '10px'; // 设置边距

            var deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.className = 'delete-button';
            deleteButton.onclick = function() {
                this.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[0]);
    }
}
</script>

</body>
</html>