/** * 文件预览功能 * 包括图片、视频、音频、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, };