h5动态添加和删除图片代码怎么写
时间: 2024-05-30 22:15:18 浏览: 11
以下是h5动态添加和删除图片代码示例:
添加图片代码:
<input type="file" id="fileInput">
<script>
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function(e) {
var file = e.target.files[0];
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
document.body.appendChild(img);
});
</script>
这段代码创建了一个文件选择框,并监听了其change事件。当用户选择文件后,通过URL.createObjectURL()方法生成一个图片URL,然后创建一个img元素并将其添加到body中。
删除图片代码:
<img src="example.jpg" id="img1">
<img src="example2.jpg" id="img2">
<button onclick="deleteImage()">删除图片</button>
<script>
function deleteImage() {
var img = document.getElementById("img1");
img.parentNode.removeChild(img);
}
</script>
这段代码创建了两个img元素以及一个按钮。当用户点击按钮时,deleteImage()函数会被调用。该函数通过getElementById()方法获取到要删除的元素,并使用parentNode.removeChild()方法将其从DOM中删除。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)