我创建了一个文件上传系统，用户可以在其中上传图像或视频。然后显示当前上传文件的预览。
结果期望:我想显示只是**一个**预览取决于文件类型(图像||视频)。
问题:如何根据文件类型显示一个预览?
尝试:我试过使用'。分裂的,,"。弹出'只提取文件扩展名，但无济于事。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="/styles/style.css"> -->
<link rel="stylesheet" href="/styles/index.css">
</head>
<body id="upload_body">
<!--File Upload -->
<div class="upload_container">
<div class="container">
<input type="file" id="file_picker" accept="image/*,video/mp4"><br>
<div class="preview-container">
<!-- Show button if image is displayed-->
<button type="button" id="button_clear">CLEAR</button><br>
<!--Show image preview-->
<img id="image" src="" height="300px" width="auto"><br>
<!--Show video preview -->
<video id="video" src="" height="300px" width="auto" autoplay="true" loop muted></video>
</div>
</div>
</div>
<!-- Socials -->
<h3 class="lead">
Follow Us <br><br>
<a href="https://twitter.com/DevTopia_">
<img src="/assets/twitter.png" alt="twitter profile link" height="32px"/>
</a>
<a href="https://discord.gg/GAHDdWyj">
<img src="/assets/discord.png" alt="twitter profile link" height="32px"/>
</a>
</h3>
</div>
<!-- JS -->
<script type="application/javascript" src="/js/file_picker.js"></script>
<script type="application/javascript" src="/js/content_script.js"></script>
</body>
</html>
Javascript
function storage_onChanged(changes, areaName) {
let settings = {};
if (areaName == "local") {
if (changes.image_data_url) {
settings.image_data_url = changes.image_data_url.newValue ?? "";
}
if (changes.image_filename) {
settings.image_filename = changes.image_filename.newValue ?? "none";
}
}
set_image(settings);
}
function set_image(settings) {
let image = document.getElementById("image");
let file_picker = document.getElementById("file_picker");
let video = document.getElementById("video");
let ext = file_picker.value.split(".").pop();
if (settings.image_data_url !== undefined) {
video.src = settings.image_data_url;
image.src = settings.image_data_url;
}
if (settings.image_filename !== undefined) {
image.alt = settings.image_filename;
video.alt = settings.image_filename;
}
}
function remove_image() {
chrome.storage.local.remove(["image_data_url", "image_filename"]);
}
function store_image() {
if (this.files.length > 0) {
const reader = new FileReader();
reader.addEventListener("load", () => {
chrome.storage.local.set({
image_data_url: reader.result,
image_filename: this.files[0].name,
});
});
reader.readAsDataURL(this.files[0]);
}
}
// Initialization
chrome.storage.local.get(["image_data_url", "image_filename"]).then((items) => {
set_image({
image_data_url: items.image_data_url ?? "",
image_filename: items.image_filename ?? "none",
});
});
// File Picker
let file_picker = document.querySelector("#file_picker");
if (file_picker) {
file_picker.addEventListener("change", store_image);
}
var button_clear = document.getElementById("button_clear");
if (button_clear) {
button_clear.addEventListener("click", remove_image);
}
chrome.storage.onChanged.addListener(storage_onChanged);
// End
File对象公开了一个type属性。
所以你可以选择如何显示预览基于类型:
document.querySelector('[type=file]').addEventListener('change', async (event) => {
// get the first file
const [file] = event.target.files;
// get the preview
const dataUrl = await preview(file);
// choose what dom element type to create based on file.type
// (i'm not sure you'd actually want to do precisely this.
// just illustrating that you can do whatever you want with the type.)
const previewType = file.type.startsWith('image') ? 'img' : 'video';
// create the DOM element
const previewElem = document.createElement(previewType);
// set src to the preview
previewElem.src = dataUrl;
// add it to the document
document.body.appendChild(previewElem);
})
// create a dataURL preview from the given file
async function preview(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener("load", () => {
resolve(reader.result);
});
reader.readAsDataURL(file);
})
}<input type="file" />