在web开发中，用户经常需要上传图片或视频文件。为了提供更好的用户体验，通常会在文件上传前提供一个预览功能。然而，当需要在一个文件选择框中同时支持图片和视频预览时，传统的单一处理方式就显得不足。本文将介绍一种高效的方法，通过javascript动态检测文件类型，并根据类型选择合适的html元素进行预览。
实现这一功能主要依赖以下Web API和技术：
首先，我们需要一个HTML结构来承载文件输入框以及图片和视频的预览区域。
<input type="text" id="thetitle" name="title" placeholder="标题"> <input type="text" id="imagepath" name="imagepath" hidden> <input type="file" name="file" onchange="readURL(this)"> <!-- 图片预览区域 --> <img src="" id="img" alt="图片预览" style="max-width: 320px; display: none;"> <br> <!-- 视频预览区域，初始隐藏 --> <video width="320" height="240" style="display:none" controls autoplay> <source src="" id="forvideo"> 您的浏览器不支持视频标签。 </video>
说明：
核心逻辑位于readURL函数中，它负责处理文件选择事件，识别文件类型，并更新相应的预览元素。
立即学习“前端免费学习笔记（深入）”；
function readURL(input) {
// 获取视频源元素及其父视频元素
var videoSource = document.querySelector("#forvideo");
var videoElement = videoSource.parentNode;
var imageElement = document.querySelector("#img");
// 每次选择新文件时，先隐藏所有预览元素，并清空内容
imageElement.style.display = "none";
imageElement.setAttribute("src", "");
videoElement.style.display = "none";
videoSource.src = "";
videoElement.load(); // 强制视频元素重新加载内容
if (input.files && input.files[0]) {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// 使用正则表达式从Data URL中提取文件MIME类型
// Data URL格式通常为：data:[<mediatype>][;base64],<data>
var match = e.target.result.match(/^data:([^/]+)\/([^;]+);/) || [];
var type = match[1]; // 提取主类型，如 "image" 或 "video"
// 根据文件类型进行不同的处理
if (type === "video") {
// 如果是视频文件，使用URL.createObjectURL创建URL
// 这种方式更高效，因为它不会将整个视频文件加载到内存
videoSource.src = URL.createObjectURL(file);
videoElement.load(); // 加载新的视频源
videoElement.style.display = "block"; // 显示视频播放器
imageElement.style.display = "none"; // 确保图片预览隐藏
} else if (type === "image") {
// 如果是图片文件，使用FileReader读取的Data URL作为图片源
imageElement.setAttribute("src", e.target.result);
imageElement.style.display = "block"; // 显示图片
videoElement.style.display = "none"; // 确保视频预览隐藏
} else {
// 处理其他不支持的类型，例如清空预览或显示提示
console.warn("不支持的文件类型:", type);
}
};
// 读取文件内容为Data URL
// 对于图片，这会生成一个Base64编码的字符串，可以直接作为`<img>`的`src`
reader.readAsDataURL(file);
}
}将上述HTML和JavaScript代码整合在一起，即可实现完整的图片/视频预览功能。
HTML (makeapost.php 或 .html)
<!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>
body { font-family: Arial, sans-serif; margin: 20px; }
img, video { border: 1px solid #ddd; margin-top: 10px; }
input[type="file"] { margin-top: 10px; }
</style>
</head>
<body>
<h1>上传文件预览</h1>
<input type="text" id="thetitle" name="title" placeholder="标题">
<input type="text" id="imagepath" name="imagepath" hidden>
<br>
<label for="fileInput">选择图片或视频文件:</label>
<input type="file" id="fileInput" name="file" onchange="readURL(this)">
<!-- 图片预览区域 -->
<img src="" id="img" alt="图片预览" style="max-width: 320px; display: none;">
<br>
<!-- 视频预览区域，初始隐藏 -->
<video width="320" height="240" style="display:none" controls autoplay>
<source src="" id="forvideo">
您的浏览器不支持视频标签。
</video>
<script>
function readURL(input) {
var videoSource = document.querySelector("#forvideo");
var videoElement = videoSource.parentNode;
var imageElement = document.querySelector("#img");
// 每次选择新文件时，先隐藏所有预览元素，并清空内容
imageElement.style.display = "none";
imageElement.setAttribute("src", "");
videoElement.style.display = "none";
videoSource.src = "";
// videoElement.load(); // 强制视频元素重新加载内容，但在src为空时可能不必要
if (input.files && input.files[0]) {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var match = e.target.result.match(/^data:([^/]+)\/([^;]+);/) || [];
var type = match[1]; // "image" or "video"
if (type === "video") {
videoSource.src = URL.createObjectURL(file);
videoElement.load();
videoElement.style.display = "block";
imageElement.style.display = "none";
} else if (type === "image") {
imageElement.setAttribute("src", e.target.result);
imageElement.style.display = "block";
videoElement.style.display = "none";
} else {
console.warn("不支持的文件类型:", type);
alert("您选择的文件类型不支持预览。请选择图片或视频文件。");
}
};
reader.readAsDataURL(file);
} else {
// 如果没有选择文件，也清空预览
imageElement.style.display = "none";
imageElement.setAttribute("src", "");
videoElement.style.display = "none";
videoSource.src = "";
}
}
</script>
</body>
</html>// 在readURL函数开始时，如果存在旧的视频URL，可以撤销它
if (videoSource.src && videoSource.src.startsWith("blob:")) {
URL.revokeObjectURL(videoSource.src);
}
// ... 然后再创建新的URL
videoSource.src = URL.createObjectURL(file);通过结合FileReader API、URL.createObjectURL()和正则表达式进行类型判断，我们可以灵活地实现一个支持多种媒体类型（图片和视频）的单文件输入预览功能。这种方法不仅提高了代码的复用性，也为用户提供了更流畅、更直观的交互体验。在实际项目中，根据具体需求可以进一步完善错误处理和内存管理机制。
以上就是实现前端单文件输入多媒体（图片与视频）预览功能的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
327
收藏
