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 = function () { showPopup(img.src); }; // 隐藏原始的input元素 input.style.display = "none"; // 添加图片到input元素的父节点 input.parentNode.appendChild(img); }; reader.readAsDataURL(input.files[0]); } } function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; // 设置悬浮窗的样式 popup.style.position = "fixed"; popup.style.top = "50%"; popup.style.left = "50%"; popup.style.transform = "translate(-50%, -50%)"; popup.style.backgroundColor = "white"; popup.style.zIndex = "9999"; popup.style.padding = "10px"; popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.2)"; // 设置悬浮窗中的图片样式 popupImg.style.maxWidth = "100%"; popupImg.style.maxHeight = "100%"; // 设置悬浮窗中的图片源 popupImg.src = imageSrc; // 将图片添加到悬浮窗中 popup.appendChild(popupImg); // 将悬浮窗添加到页面中 document.body.appendChild(popup); }我按照你的修改后，图片添加到页面后无法预览

抱，我在之前的回答中遗漏了一部分代码。为了能够正常预览图片，您需要添加一些样式和事件处理程序来控制悬浮窗的显示和隐藏。请尝试以下修改：

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.classList.add("preview-image"); // 添加一个类名

      // 隐藏原始的input元素
      input.style.display = "none";

      // 添加图片到input元素的父节点
      input.parentNode.appendChild(img);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

function showPopup(imageSrc) {
  var popup = document.createElement("div");
  var popupImg = document.createElement("img");
  var closeButton = document.createElement("button"); // 添加关闭按钮

  // 设置悬浮窗的样式
  popup.style.position = "fixed";
  popup.style.top = "50%";
  popup.style.left = "50%";
  popup.style.transform = "translate(-50%, -50%)";
  popup.style.backgroundColor = "white";
  popup.style.zIndex = "9999";
  popup.style.padding = "10px";
  popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.2)";

  // 设置悬浮窗中的图片样式
  popupImg.style.maxWidth = "100%";
  popupImg.style.maxHeight = "100%";

  // 设置悬浮窗中的图片源
  popupImg.src = imageSrc;

  // 设置关闭按钮的样式和点击事件处理程序
  closeButton.innerText = "关闭";
  closeButton.style.marginTop = "10px";
  closeButton.addEventListener("click", function() {
    document.body.removeChild(popup);
  });

  // 将图片和关闭按钮添加到悬浮窗中
  popup.appendChild(popupImg);
  popup.appendChild(closeButton);

  // 将悬浮窗添加到页面中
  document.body.appendChild(popup);
}

// 添加样式
var style = document.createElement("style");
style.innerHTML = ".preview-image { max-width: 200px; max-height: 200px; cursor: pointer; }";
document.head.appendChild(style);

通过上述代码，我添加了一个关闭按钮，并在点击按钮时删除悬浮窗。另外，我还添加了一个样式类 `.preview-image`，用于设置图片的最大宽度、最大高度和鼠标指针样式。请尝试使用这个修改后的代码，看看能否正常预览图片。