function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = showPopup; input.parentNode.appendChild(img); input.style.display = "none"; // 隐藏原始的input元素 } reader.readAsDataURL(input.files[0]); } }添加图片后点击图片能够出现弹窗来显示图片,
时间: 2024-04-11 12:27:16 浏览: 22
你可以使用以下的代码来实现点击图片后弹窗显示图片的功能:
```javascript
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
img.alt = "照片";
img.onclick = showPopup;
input.parentNode.appendChild(img);
input.style.display = "none"; // 隐藏原始的input元素
}
reader.readAsDataURL(input.files[0]);
}
}
function showPopup() {
var popup = document.createElement("div");
popup.className = "popup";
var popupImg = document.createElement("img");
popupImg.src = this.src;
popupImg.alt = "照片";
popup.appendChild(popupImg);
document.body.appendChild(popup);
// 添加点击事件监听器,点击其他区域时隐藏弹出窗口
popup.onclick = function () {
popup.style.display = "none";
document.body.removeChild(popup);
};
}
```
请确保在页面的CSS样式中定义一个名为"popup"的类,用于设置弹出窗口的样式。你可以根据需要自定义弹出窗口的样式。