上传前预览图片 - Html

在网页中，我们经常需要用户上传图片。上传之前预览图片可以让用户确认上传的图片是否符合期望。本文将介绍如何实现上传前预览图片。

1. 使用 FileReader

FileReader是HTML5中的API，用于读取文件内容。我们可以借助FileReader来实现预览图片的功能。

HTML代码：

<input type="file" id="fileInput">
<img id="preview">

我们使用一个input元素来让用户选择图片文件，然后使用img元素来显示预览图片。

JavaScript代码：

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function() {
    const file = fileInput.files[0];
    if (file) {
        const reader = new FileReader();
        reader.addEventListener('load', function() {
            preview.src = reader.result;
        });
        reader.readAsDataURL(file);
    }
});

我们为文件选择框添加了一个change事件监听器，当用户选择了文件后，就会执行回调函数。在回调函数中，我们首先获取用户选择的文件，然后创建一个新的FileReader对象。当FileReader读取文件完成后，会触发load事件，我们在这个事件处理函数中设置img元素的src属性为读取到的文件内容，从而实现预览图片的功能。

2. 使用 URL.createObjectURL

另一种实现上传前预览图片的方式是使用URL.createObjectURL。这个API可以用于生成一个指向文件的URL，我们可以将这个URL赋值给img元素的src属性，从而实现预览图片的功能。

HTML代码：

<input type="file" id="fileInput">
<img id="preview">

JavaScript代码：

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function() {
    const file = fileInput.files[0];
    if (file) {
        const url = URL.createObjectURL(file);
        preview.src = url;
    }
});

我们为文件选择框添加了一个change事件监听器，当用户选择了文件后，就会执行回调函数。在回调函数中，我们首先获取用户选择的文件，然后使用URL.createObjectURL生成一个指向文件的URL，将这个URL赋值给img元素的src属性即可实现预览图片的功能。

结语

以上介绍了两种实现上传前预览图片的方法。第一种方法使用FileReader读取文件内容，第二种方法使用URL.createObjectURL生成一个指向文件的URL。两种方法都需要用户选择要上传的图片文件，并将图片预览在img元素中。在实际开发中，我们可以根据需求选择合适的方法实现上传前预览图片的功能。