浏览器内置的图片预览方法来实现图片预览功能

浏览器内置的图片预览方法可以通过使用HTML5的File API和URL.createObjectURL()方法来实现。具体步骤如下：

1. 在HTML中添加一个文件上传输入框和一个用于显示预览图像的<img>元素。

<input type="file" id="fileInput">
<img id="previewImage" src="#" alt="预览图像">

2. 在JavaScript中获取文件上传输入框和用于显示预览图像的<img>元素，并为文件上传输入框添加一个change事件监听器。

const fileInput = document.getElementById('fileInput');
const previewImage = document.getElementById('previewImage');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const imageUrl = URL.createObjectURL(file);
  previewImage.src = imageUrl;
});

3. 当用户选择文件并上传时，change事件将被触发。在事件处理程序中，我们首先获取所选文件，并使用URL.createObjectURL()方法创建一个URL对象。然后将该URL对象设置为<img>元素的src属性值，这将在页面上显示所选文件的预览图像。

需要注意的是，URL.createObjectURL()方法创建的URL对象是临时的，当不再需要时，应该使用URL.revokeObjectURL()方法来释放它。这可以通过在预览图像的load事件处理程序中调用URL.revokeObjectURL()方法来实现。