在 Web 开发中，使用 JavaScript 实现图片上传预览主要有两种方法：URL.createObjectURL() 和 FileReader.readAsDataURL()。两者各有优缺点，具体选择取决于您的应用场景和需求。
URL.createObjectURL() 方法
优点：直接生成指向文件的临时 URL，适用于快速预览，性能优于 FileReader。createObjectURL() 创建 URL 是同步的，代码逻辑更简单。
缺点：生成的对象 URL 占用内存，需要在不再使用时调用 URL.revokeObjectURL() 释放，否则可能导致内存泄漏。
适用场景：仅需要在客户端预览上传的图片或视频，无需对文件内容进行处理。需要高效处理大文件预览的情况。
URL.createObjectURL() 用法示例
首先，创建一个文件输入元素和一个用于显示预览图片的容器：
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="previewContainer"></div>
- <input type="file">：文件选择输入框，accept="image/*" 限制只能选择图片文件，multiple 属性允许多选。
- <div id="previewContainer">：用于展示预览图片的容器。
接下来，编写 JavaScript 代码，实现图片预览：
document.getElementById('fileInput').addEventListener('change', function(event) {
const files = event.target.files;
const previewContainer = document.getElementById('previewContainer');
previewContainer.innerHTML = ''; // 清空之前的预览
if (files.length === 0) {
const noFilesMessage = document.createElement('p');
noFilesMessage.textContent = '未选择任何文件。';
previewContainer.appendChild(noFilesMessage);
return;
}
for (const file of files) {
if (!file.type.startsWith('image/')) {
alert('请选择图片文件！');
continue;
}
const img = document.createElement('img');
img.style.width = '150px';
img.style.margin = '10px';
img.alt = '预览图';
const objectURL = URL.createObjectURL(file);
img.src = objectURL;
previewContainer.appendChild(img);
// 释放之前创建的对象 URL，防止内存泄漏
img.onload = function() {
URL.revokeObjectURL(objectURL);
};
}
});
- 事件监听器：监听文件输入的 change 事件，获取用户选择的文件列表。
- 清空预览容器：每次选择文件后，先清空之前的预览内容。
- 文件类型验证：检查所选文件是否为图片类型，非图片文件将提示用户。
- 创建预览图像：使用 URL.createObjectURL() 方法为每个文件生成一个临时的 URL，并将其赋值给图片元素的 src 属性。
- 释放对象 URL：在图片加载完成后，调用 URL.revokeObjectURL() 方法释放之前创建的对象 URL，防止内存泄漏。
URL.createObjectURL() 创建的对象 URL 会占用内存，使用后应及时释放。在图片加载完成后，调用 URL.revokeObjectURL() 方法释放资源。URL.createObjectURL() 方法在现代浏览器中均受支持，但在非常老旧的浏览器（如 IE10 及以下）可能不兼容。对于不支持的浏览器，可以考虑使用 FileReader API 作为替代方案。
FileReader.readAsDataURL() 方法
优点：读取的结果会被 JavaScript 的垃圾回收机制自动清理，无需手动释放内存。返回的 Base64 编码字符串适用于需要对文件内容进行进一步处理的场景，例如将图片数据直接嵌入到页面或发送到服务器。
缺点：对于大文件，读取和转换为 Base64 编码可能会消耗更多内存和时间，影响性能。需要使用回调函数处理读取完成后的操作，代码可能相对复杂。
适用场景：需要获取文件的 Base64 编码以便嵌入或传输时。对文件内容需要进行进一步处理或分析的情况。
FileReader.readAsDataURL() 用法示例
首先，创建一个文件输入元素和一个用于显示预览图片的容器：
<input type="file" id="fileInput" accept="image/*" multiple>
<div id="previewContainer"></div>
- <input type="file">：文件选择输入框，accept="image/*" 限制只能选择图片文件，multiple 属性允许多选。
- <div id="previewContainer">：用于展示预览图片的容器。
接下来，编写 JavaScript 代码，实现图片预览：
document.getElementById('fileInput').addEventListener('change', function(event) {
const files = event.target.files;
const previewContainer = document.getElementById('previewContainer');
previewContainer.innerHTML = ''; // 清空之前的预览
if (files.length === 0) {
const noFilesMessage = document.createElement('p');
noFilesMessage.textContent = '未选择任何文件。';
previewContainer.appendChild(noFilesMessage);
return;
}
for (const file of files) {
if (!file.type.startsWith('image/')) {
alert('请选择图片文件！');
continue;
}
const img = document.createElement('img');
img.style.width = '150px';
img.style.margin = '10px';
img.alt = '预览图';
const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
};
reader.readAsDataURL(file);
previewContainer.appendChild(img);
}
});
- 事件监听器：监听文件输入的 change 事件，获取用户选择的文件列表。
- 清空预览容器：每次选择文件后，先清空之前的预览内容。
- 文件类型验证：检查所选文件是否为图片类型，非图片文件将提示用户。
- 创建预览图像：使用 FileReader 对象读取图片文件，并将其显示在预览容器中。
FileReader API 在现代浏览器中均受支持，但在非常老旧的浏览器（如 IE10 及以下）可能不兼容。对于不支持的浏览器，可以提示用户更新浏览器，或提供不带预览的上传功能。
URL.createObjectURL() 和 FileReader.readAsDataURL() 如何选择？
- 预览需求：如果主要需求是预览上传的图片，建议使用 URL.createObjectURL() 方法，因其性能更优，且代码更简洁。
- 数据处理需求：如果需要获取文件的 Base64 编码进行进一步处理或传输，FileReader.readAsDataURL() 方法更为适合。
选择哪种方法取决于您的具体需求和应用场景。对于简单的图片预览，URL.createObjectURL() 是更好的选择；而在需要对文件内容进行处理时，FileReader.readAsDataURL() 更为适用。