在Web开发中，文件上传功能常常伴随着用户预览的需求。用户希望在选择图片或视频文件后，能够立即在页面上看到其内容，以便确认选择无误。传统做法可能需要为图片和视频设置不同的输入框，或者使用复杂的逻辑来切换显示。本教程旨在解决这一痛点，通过一个 <input type="file"> 元素，智能地实现图片和视频的统一预览。
核心需求包括：
首先，我们需要在HTML页面中设置文件输入框以及用于显示预览内容的 <img> 和 <video> 元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件预览教程</title>
<style>
/* 简单样式，确保视频初始不显示 */
#img {
max-width: 320px;
max-height: 240px;
display: block; /* 默认显示图片 */
margin-top: 10px;
}
#video-preview-container {
max-width: 320px;
max-height: 240px;
display: none; /* 视频容器默认隐藏 */
margin-top: 10px;
}
</style>
</head>
<body>
<h1>媒体文件预览示例</h1>
<input type="text" id="thetitle" name="title" placeholder="标题" hidden>
<input type="text" id="imagepath" name="imagepath" hidden>
<!-- 文件输入框，通过onchange事件触发预览函数 -->
<input type="file" name="file" id="mediaFile" onchange="readURL(this)">
<br>
<!-- 图片预览区域 -->
<img src="" id="img" alt="图片预览">
<br>
<!-- 视频预览区域，初始隐藏 -->
<video width="320" height="240" controls autoplay id="video-preview-container">
<source src="" id="forvideo">
您的浏览器不支持HTML5视频标签。
</video>
<script src="main.js"></script>
</body>
</html>关键点解析：
立即学习“Java免费学习笔记（深入）”；
JavaScript是实现文件类型判断和动态预览的核心。我们将使用 FileReader API 来读取文件内容，并结合正则表达式判断文件类型。
// main.js
function readURL(input) {
// 获取图片和视频预览元素
const imgPreview = document.querySelector("#img");
const videoContainer = document.querySelector("#video-preview-container");
const videoSource = document.querySelector("#forvideo");
// 每次选择文件时，重置预览状态，隐藏所有预览元素
imgPreview.style.display = "none";
videoContainer.style.display = "none";
imgPreview.src = ""; // 清空图片源
videoSource.src = ""; // 清空视频源
if (input.files && input.files[0]) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
// 使用正则表达式从Data URL中提取MIME类型
// Data URL格式通常为: data:[<mediatype>][;base64],<data>
// 例如: data:image/png;base64,iVBORw0KGgo...
// data:video/mp4;base64,AAAAHGZ0eXA...
const match = e.target.result.match(/^data:([^/]+)\/([^;]+);/);
const fileType = match ? match[1] : ''; // 提取主类型，如 'image' 或 'video'
if (fileType === "image") {
// 如果是图片，更新img标签的src，并显示图片
imgPreview.src = e.target.result;
imgPreview.style.display = "block";
} else if (fileType === "video") {
// 如果是视频，使用URL.createObjectURL创建临时URL
// 这种方式比Data URL更适合大文件，因为它不会将整个文件加载到内存
videoSource.src = URL.createObjectURL(file);
videoContainer.load(); // 重新加载视频元素以应用新的src
videoContainer.style.display = "block"; // 显示视频容器
} else {
// 处理不支持的文件类型
console.warn("不支持的文件类型: " + fileType);
alert("不支持的文件类型，请选择图片或视频。");
}
};
// 读取文件内容为Data URL
// 对于图片，Data URL可以直接作为img的src
// 对于视频，Data URL通常效率较低，但FileReader是获取文件内容的通用方式
// 实际视频源会通过URL.createObjectURL设置
reader.readAsDataURL(file);
}
}JavaScript逻辑详解：
元素获取与重置：
文件检查：
FileReader API：
文件类型判断：
条件渲染：
reader.readAsDataURL(file);：
// 在 readURL 函数开头添加
if (videoSource.src && videoSource.src.startsWith("blob:")) {
URL.revokeObjectURL(videoSource.src); // 撤销旧的视频URL
}通过本教程，您已经掌握了如何使用单个文件输入框实现图片和视频文件的动态预览功能。核心技术包括：
这种方法不仅提升了用户体验，也简化了前端代码逻辑，使其更加健壮和易于维护。在实际项目中，您可以基于此基础进一步扩展，例如添加文件大小验证、多文件选择预览等功能。
以上就是JavaScript实现单文件输入框的图片与视频媒体文件预览的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
546
