/**
* 文件预览功能
* 包括图片、视频、音频、PDF、文本等预览
*/
/**
* 获取文件类型
* @param {string} filename - 文件名
* @returns {string} 文件类型
*/
function getFileType(filename) {
const extension = filename.toLowerCase().split(".").pop();
const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "ico"];
const videoExtensions = ["mp4", "webm", "ogg", "mov", "avi", "mkv", "m4v"];
const audioExtensions = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "opus", "weba"];
const pdfExtensions = ["pdf"];
const textExtensions = [
"txt",
"log",
"md",
"json",
"xml",
"csv",
"js",
"css",
"html",
"py",
"java",
"c",
"cpp",
"h",
"hpp",
"sh",
"bat",
"yaml",
"yml",
"toml",
"ini",
"conf",
];
if (imageExtensions.includes(extension)) {
return "image";
}
if (videoExtensions.includes(extension)) {
return "video";
}
if (audioExtensions.includes(extension)) {
return "audio";
}
if (pdfExtensions.includes(extension)) {
return "pdf";
}
if (textExtensions.includes(extension)) {
return "text";
}
return "unsupported";
}
/**
* 关闭预览
*/
function closePreview() {
const modal = document.getElementById("previewModal");
if (modal) {
modal.classList.remove("show");
document.body.style.overflow = "";
}
}
/**
* 打开预览
* @param {string} url - 文件 URL
* @param {string} filename - 文件名
*/
function openPreview(url, filename) {
const modal = document.getElementById("previewModal");
const container = document.getElementById("previewContainer");
const info = document.getElementById("previewInfo");
if (!modal || !container || !info) {
window.open(url, "_blank");
return;
}
const fileType = getFileType(filename);
// 对于不支持预览的文件类型,显示提示信息
if (fileType === "unsupported") {
container.innerHTML = `
该文件不支持预览
文件名: ${filename}
`;
info.textContent = filename;
modal.classList.add("show");
document.body.style.overflow = "hidden";
return;
}
container.innerHTML = '加载中...
';
info.textContent = filename;
modal.classList.add("show");
document.body.style.overflow = "hidden";
setTimeout(() => {
if (fileType === "image") {
const image = document.createElement("img");
image.className = "preview-content";
image.src = url;
image.alt = filename;
image.style.maxWidth = "100%";
image.style.maxHeight = "100%";
image.onerror = () => {
container.innerHTML = '加载失败
';
};
container.innerHTML = "";
container.appendChild(image);
} else if (fileType === "video") {
const video = document.createElement("video");
video.className = "preview-content";
video.controls = true;
video.style.maxWidth = "100%";
video.style.maxHeight = "100%";
const source = document.createElement("source");
source.src = url;
source.type = `video/${url.split(".").pop()}`;
video.appendChild(source);
container.innerHTML = "";
container.appendChild(video);
} else if (fileType === "audio") {
const audio = document.createElement("audio");
audio.className = "preview-content";
audio.controls = true;
audio.style.width = "100%";
const source = document.createElement("source");
source.src = url;
source.type = `audio/${url.split(".").pop()}`;
audio.appendChild(source);
container.innerHTML = "";
container.appendChild(audio);
} else if (fileType === "pdf") {
container.innerHTML = `
`;
} else if (fileType === "text") {
fetch(url)
.then((response) => response.text())
.then((text) => {
const pre = document.createElement("pre");
pre.className = "preview-text";
pre.textContent = text;
pre.style.margin = "0";
pre.style.padding = "16px";
pre.style.overflow = "auto";
pre.style.whiteSpace = "pre-wrap";
pre.style.wordWrap = "break-word";
container.innerHTML = "";
container.appendChild(pre);
})
.catch(() => {
container.innerHTML = '加载失败
';
});
}
}, 100);
}
/**
* 导出到全局作用域
*/
window.PreviewUtils = {
getFileType,
closePreview,
openPreview,
};