使用JavaScript实现图片预览功能

能者

要使用JavaScript实现图片预览功能，可以使用HTML5的File API和Canvas元素来完成。以下是一个简单的示例代码:

[mw_shl_code=html,true]
<!DOCTYPE html>
<html>
<head>
  <title>图片预览</title>
  <style>
    #preview {
      max-width: 400px;
    }
  </style>
</head>
<body>
  <input type="file" id="upload" accept="image/*">
  <div id="preview"></div>

  <script>
    function previewImage(event) {
      var input = event.target;
      var reader = new FileReader();

      reader.onload = function() {
        var dataURL = reader.result;
        var img = new Image();
        img.src = dataURL;
        img.style.maxWidth = "100%";
        document.getElementById("preview").innerHTML = "";
        document.getElementById("preview").appendChild(img);
      };

      reader.readAsDataURL(input.files[0]);
    }

    document.getElementById("upload").addEventListener("change", previewImage);
  </script>
</body>
</html>
[/mw_shl_code]

这段代码创建了一个能够选择本地图片文件的输入框，并在选择图片后将预览图片显示在页面上。当用户选择图片后，`previewImage`函数会被调用。该函数使用`FileReader`对象读取选中的文件，并将其转换为Data URL格式。然后，将Data URL赋值给一个新的`<img>`元素的`src`属性，并将该元素添加到具有id为“preview”的容器中，以实现预览效果。

请注意，此代码仅实现了基本的图片预览功能。要对上传的图片进行更多处理，如压缩、裁剪等，需要使用其他JavaScript库或编写更复杂的代码。

forLove

111111111