在浏览器中检测上传的图片格式是否正确

Question

我有一张 file.svg 图片，我将文件重命名为 file.jpg

现在在浏览器中打开这个jpg文件肯定无法预览我的图片。所以我正在尝试的是检测通过输入表单上传的 jpg 图像是否实际上是浏览器中的 jpg。

我尝试以 base64 格式读取文件，但找不到任何内容。有一种方法可以检测 jpg 图片是否被截断这是对那篇文章的引用

如何检测图像的类型是否与扩展名一样正确？

Answer 1

像这样在输入上添加事件处理程序 onChange：

<input type="file" id="file_uploader" />

然后在 javascript 中添加一个事件处理程序，它将侦听该输入的变化：

const file_input = document.getElementById(("file_uploader")

file_input.addEventListener("change", handleChange)

这将自动将 event 传递给 handleChange，因此您实际上可以引用它：

const handleChange = e => {
    const name = e.targe.file[0].name
    // name = filename.extnesion
    const extension = name.split(".")[1]
}

Split 方法将给出一个包含 2 个字符串的数组 - . 之前的字符串 - 文件名，以及 . 之后的字符串 - 扩展名。

Answer 2

仅通过查看文件名来查找 mime 类型是不安全的。您应该通过读取位于文件内容开头的签名字节来找到文件的确切 MIME 类型。

通过 this list 您可以找到签名-mime 类型配对。

我在下面写了一个示例代码，您可以在其中检查所选文件是否是否为有效的 jpeg 文件。 JPEG 有一个简单的签名，如果文件的前 2 个字节是 0xFF 和 0xD8 你可以说这个文件是一个 jpeg 文件。（更完整的签名信息请查看列表）

document.querySelector('input').addEventListener('change', function() 
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var bytes = new Uint8Array(this.result);
  if ((bytes[0] == 0xFF) && (bytes[1] == 0xD8))
   console.log("this is a valid jpeg file");
  else
   console.log("this does not look like a jpeg file");
 }
 reader.readAsArrayBuffer(this.files[0]);
});

<input type="file">

Answer 3

正如 Alper Cinar 所提到的，读取扩展名是不安全的，以及我们如何读取起始字节来识别 MIME 类型。我想添加一个小代码片段，不仅可以识别 jpg 的 mime 类型，还可以识别 gifs 和 pngs

      const blob = files[0];
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onloadend = (e) => {
        const arr = (new Uint8Array(<any>e.target.result)).subarray(0, 4);
        let header = '';
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        console.log(header);
        let type: any;
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            type = 'image/jpeg';
            break;
          default:
            type = 'unknown';
            break;
        }
        console.log(type);

      };

详细参考 How to check file MIME type with javascript before upload?

在浏览器中检测上传的图片格式是否正确

Detect within the browser if the image uploaded is of correct format

javascript

browser

base64

file-upload