<div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> </div>添加图片
时间: 2023-07-06 16:31:10 浏览: 47
要在模态框中添加图片,你需要在模态框的 HTML 结构中添加一个 `img` 元素,并为它设置一个 `id` 属性,例如:
```
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
```
然后,在 `handleSuccess` 函数中,将上传成功后的图片的 URL 赋值给模态框中的 `img` 元素的 `src` 属性,并将模态框显示出来,例如:
```
function handleSuccess(file, response) {
// 创建新的 img 元素
var img = new Image();
// 将上传成功后的图片的 URL 赋值给 img 元素的 src 属性
img.src = response.url;
// 将 img 元素添加到页面中
document.body.appendChild(img);
// 为 img 元素添加点击事件的监听器
img.addEventListener('click', function() {
// 将上传成功后的图片的 URL 赋值给模态框中的 img 元素的 src 属性
document.getElementById('img01').src = response.url;
// 显示模态框
document.getElementById('myModal').style.display = 'block';
});
}
```
上述代码中,`document.getElementById('img01').src = response.url;` 将上传成功后的图片的 URL 赋值给模态框中的 `img` 元素的 `src` 属性,`document.getElementById('myModal').style.display = 'block';` 显示模态框。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)