时间戳

首页 > 解决方案 > 区分文件上传JS上的视频或图像

javascript - 区分文件上传JS上的视频或图像

问题描述

我已经搜索了 JavaScript 是否可以区分文件是视频还是图像。但是，只有多个站点显示了如何在输入标签上接受这些类型。

但是，我需要的是 JS 如何确定文件类型，然后在图像或视频 HTML 标记中显示文件 URL。

目前，当用户要上传文件时，我将其用作文件上传输入：

<input accept="image/*,video/*" multiple="multiple"  onchange='openFile(event)' style="display: none" type="file" id="selectedFile" />

但是，用户不必“选择”是视频还是图像，浏览器可以找到文件类型并将文件源分配给正确的源元素。

我当前上传文件的代码为用户上传的图像或视频创建了一个data:url，并通过一个套接字发送给当前网站上的其他人，如下所示：


var openFile = function(file) {
    var input = file.target;
    var reader = new FileReader();
    reader.onload = function() {
        try {
            var file = reader.result;

            Toast.fire({
                title: 'Uploading your File...',
                text: " ",
                didOpen: () => {
                    Swal.showLoading()
                },
            })

socket.emit('message', `

//
//
// However how can it differentiate which tag to use and use the uploaded data URL??
//
//

<video controls autoplay="1" alt="Video Uploaded" style="cursor: zoom-in; border-radius: 4px; width: 16rem" src="${file}">

<img alt="Image Uploaded" style="cursor: zoom-in; border-radius: 4px; width: 16rem" src="${file}">
`);
        }
        catch (err) {

        }
    };
    reader.readAsDataURL(input.files[0]);
};

*我没有为文件使用 blob，因为它在通过套接字发送时不会显示给其他用户。我也宁愿使用文件输入按钮，因为我试图让用户尽可能简单。

TL;博士：

  1. 用户单击“上传文件”按钮
  2. 用户可以从同一个输入按钮上传视频或图像文件
  3. JS创建dataURL链接并找到文件格式
  4. JS 指定文件将显示在哪个属性标记（或）中
  5. 通过socket发送给别人看

如果有人能提供帮助，真的很感激！谢谢。

标签： javascripthtmljquerycss

解决方案

包含文件的reader.resultMIME 类型，从中您可以检测它是图像还是视频或其他内容：

var openFile = function(file) {
    var input = file.target;
    var reader = new FileReader();
    reader.onload = function() {
        try {
            var file = reader.result;

            Toast.fire({
                title: 'Uploading your File...',
                text: " ",
                didOpen: () => {
                    Swal.showLoading()
                },
            })
var match = reader.result.match(/^data:([^/]+)\/([^;]+);/) || [];
var type = match[1];
var format = match[2];
if (type == "video")
{
  socket.emit('message', `
<video controls autoplay="1" alt="Video Uploaded" style="cursor: zoom-in; border-radius: 4px; width: 16rem" src="${file}">
`);
}
else if (type == "image")
{
  socket.emit('message', `
<img alt="Image Uploaded" style="cursor: zoom-in; border-radius: 4px; width: 16rem" src="${file}">
`);
}
        }
        catch (err) {

        }
    };
    reader.readAsDataURL(input.files[0]);
};

有了它，您还可以通过过滤来微调它format（它不完全是文件扩展名，而是一种图像/视频类型，例如.mov= quicktime）。

推荐阅读