1. 引言
在现代web应用中，文件上传功能常常伴随着用户选择文件后的预览需求。传统上，图片预览相对简单，但当需要同时支持视频预览时，问题就变得复杂。如何在一个元素中优雅地处理这两种不同媒体类型的预览，是前端开发中一个常见的挑战。本教程将提供一个简洁而高效的解决方案，帮助开发者实现图片和视频的统一预览。
2. HTML 结构准备
首先，我们需要在HTML页面中设置文件输入框以及用于显示图片和视频的元素。关键在于为图片和视频各准备一个容器，并初始时隐藏视频容器，因为默认情况下通常不会有视频需要预览。
文件预览教程
统一文件预览示例
@@##@@
在上述HTML结构中：
- 是文件选择的核心。onchange 事件将在用户选择文件后调用 readURL JavaScript 函数。
-
用于显示图片预览。初始时设置为 display:none，在图片被选中时显示。
3. JavaScript 核心逻辑：文件类型检测与动态预览
JavaScript 函数 readURL 是实现统一预览的关键。它需要完成以下任务：
- 获取用户选择的文件。
- 使用 FileReader 读取文件内容。
- 通过文件内容的Data URL头部检测文件类型（图片或视频）。
- 根据文件类型，选择合适的预览方式并显示对应的HTML元素，同时隐藏另一个。
// main.js
let currentObjectURL = null; // 用于存储当前Blob URL，以便后续释放
function readURL(input) {
const imgElement = document.querySelector("#img");
const videoElement = document.querySelector("#forvideo").parentNode; // 获取video标签本身
const videoSource = document.querySelector("#forvideo");
// 1. 清理和重置所有预览元素的状态
// 隐藏所有预览元素
imgElement.style.display = "none";
videoElement.style.display = "none";
// 清空源，防止显示旧内容
imgElement.src = "";
videoSource.src = "";
// 释放之前可能创建的Blob URL，避免内存泄漏
if (currentObjectURL) {
URL.revokeObjectURL(currentObjectURL);
currentObjectURL = null;
}
// 2. 检查是否有文件被选中
if (input.files && input.files[0]) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
// 3. 使用正则表达式从Data URL中提取文件MIME类型
// Data URL格式通常为: data:[][;charset=][;base64],
const match = e.target.result.match(/^data:([^/]+)\/([^;]+);/);
const type = match ? match[1] : ''; // 提取主类型，如 "image", "video"
// 4. 根据文件类型执行不同的预览逻辑
if (type === "video") {
// 对于视频，使用 URL.createObjectURL 创建一个 Blob URL
// 这种方式比使用 Data URL 更高效，尤其对于大文件
currentObjectURL = URL.createObjectURL(file);
videoSource.src = currentObjectURL;
videoElement.load(); // 重新加载视频元素以应用新的源
videoElement.style.display = "block"; // 显示视频播放器
} else if (type === "image") {
// 对于图片，直接使用 FileReader 读取的 Data URL
imgElement.src = e.target.result;
imgElement.style.display = "block"; // 显示图片
} else {
// 处理不支持的文件类型，可以显示提示信息
console.warn("不支持的文件类型或无法识别:", type);
alert("请选择图片或视频文件进行预览。");
}
};
// 5. 读取文件内容为 Data URL
// 即使是视频，也先读取为 Data URL 以便通过其头部检测MIME类型
reader.readAsDataURL(file);
}
}
// 页面卸载时清理可能残留的Blob URL
window.addEventListener('beforeunload', () => {
if (currentObjectURL) {
URL.revokeObjectURL(currentObjectURL);
}
}); 4. 关键点解析与注意事项
-
FileReader.readAsDataURL(): 这个方法用于将文件内容读取为Data URL（Base64编码的字符串）。对于图片，这个Data URL可以直接作为
标签的src属性值。对于视频，我们主要利用其头部信息来判断文件类型。
- 文件类型检测: reader.result.match(/^data:([^/]+)\/([^;]+);/) 是一个正则表达式，用于从Data URL的开头匹配出MIME类型。match[1] 将捕获到主类型（如 "image" 或 "video"）。
-
视频预览优化 (URL.createObjectURL):
- 直接将大型视频文件读取为Data URL（readAsDataURL）会导致浏览器内存占用过高，性能下降。
- URL.createObjectURL(file) 是更推荐的做法。它会创建一个临时的Blob URL，指向浏览器内存中的文件对象。这个URL可以作为
- 内存管理: 使用 URL.createObjectURL 创建的URL是临时的，但它们会占用浏览器内存，直到文档被卸载或你明确调用 URL.revokeObjectURL() 来释放它。在 readURL 函数开头和页面卸载时调用 URL.revokeObjectURL(currentObjectURL) 是一个良好的实践，可以避免潜在的内存泄漏，尤其是在用户频繁选择不同文件时。
-
videoElement.load(): 当你更改
标签的 src 属性后，需要调用 - 显示与隐藏: 在 readURL 函数的开始，我们统一隐藏了图片和视频预览元素，并清空了它们的 src。这确保了每次选择新文件时，只有当前选择的文件类型对应的预览元素会显示，避免了显示旧内容或多个预览元素同时出现的问题。
- 错误处理与用户反馈: 在示例中，我们添加了一个 else 分支来处理不支持的文件类型。在实际应用中，可以提供更友好的用户提示，例如“请选择图片或视频文件”。
5. 总结
通过结合HTML的 、 和
立即学习“前端免费学习笔记（深入）”；
