<td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td>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.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 在设置弹出窗口中的图片之前获取弹出窗口的宽度和高度 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; // 计算图片应该在弹出窗口中居中显示的位置 var imgLeft = (popupWidth - popupImg.width * scale) ; var imgTop = (popupHeight - popupImg.height * scale); // 设置弹出窗口中的图片位置 popupImg.style.left = imgLeft + "px"; popupImg.style.top = imgTop + "px"; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = `scale(${scale})`; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; };我添加图片后，点击图片出现弹窗，弹窗位置在屏幕中间，在弹窗可以使用滚轮放大图片

您的代码已经实现了添加图片后点击出现弹窗，并且弹窗位置在屏幕中间的功能。要实现在弹窗中使用滚轮放大图片的功能，您可以添加以下代码：

<!-- 在弹出窗口中显示图片 -->
<div id="popup" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 999;">
  <img id="popupImg" style="position: absolute;">
</div>

<!-- 添加滚轮事件监听器 -->
<script>
  document.getElementById("popup").addEventListener("wheel", function(e) {
    e.preventDefault();
    var scale = parseFloat(popupImg.style.transform.replace("scale(", "").replace(")", ""));
    scale += e.deltaY * -0.01;
    scale = Math.min(Math.max(0.1, scale), 3); // 设置最小和最大缩放值
    popupImg.style.transform = `scale(${scale})`;
  });
</script>

这样，当您在弹窗中滚动鼠标滚轮时，就可以实现放大或缩小图片的功能。请注意，要确保滚轮事件监听器添加在弹窗元素上（在上述代码中是`<div id="popup">`），并且弹窗元素的`overflow`属性设置为`hidden`，以便隐藏滚动条。