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

Question

我有一个file.svg图片，我把文件改名为file.jpg。

现在在浏览器中打开这个jpg文件，肯定不能预览我的图片。所以我想在浏览器中检测通过输入表单上传的jpg图片是否真的是jpg。

我试着把文件读成base64，但什么也找不到。有一种方法可以检测JPG图像是否被截断，或者没有任何地方是一个参考的文章js检查图像是否被截断损坏的数据。

我怎样才能检测出图片的类型是否正确，因为它的扩展名是什么？

Answer 1

只看文件名来寻找mime类型是不安全的，你应该通过读取文件内容开头的签名字节来找到文件的确切mime类型。

有了 本榜 你可以找到签名-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 2

在输入上添加一个事件处理程序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]
}

拆分方法会给出一个由2个字符串组成的数组 -- 前面的字符串 . - 文件名，以及 . - 的扩展名。

Answer 3

正如Alper Cinar所提到的，读取扩展是不安全的，我们如何读取起始字节来识别mime类型。我想添加一个小的代码片段，不仅可以识别jpg的mime类型，还可以识别gif和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);

      };

详细参考如何在上传前用javascript检查文件MIME类型？