使用JavaScript实现图片预览功能

能者 · 发表于 2023-9-13 23:00:09

本站资源全部免费,回复即可查看下载地址!

您需要登录才可以下载或查看，没有帐号？立即注册

x

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

[HTML] 纯文本查看 复制代码

<!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>

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

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

forLove · 发表于 2023-9-13 23:26:06

111111111

		自动登录	找回密码
密码			立即注册

[前端] 使用JavaScript实现图片预览功能

本站资源全部免费,回复即可查看下载地址!

温馨提示：