Question

我尝试使用JQuery创建一个真正的文件类型验证。我想检查我的图像是JPG还是PNG。这是我的功能：

function validate_file(file) {
    if(file.type.match("image/jpeg") || file.type.match("image/png")) {
     return true;
    }
    else {
      alert("Formats supportés : jpeg et png");
      return false;
    }
}

“exemple_1.jpg”为true，“exemple_2.pdf”为false。如果我将我的第二个文件重命名为“exemple_2.jpg”，这是真的......但必须是假的！

我想测试该文件是否是真正的JPG或PNG。我的图像是在HTML5画布上绘制的。

有什么想法吗？

更新：

这是加载图像的功能

img.onload = function() {
    // Resize images (width)
    if (img.width > max_width) {
        ratio = max_width / img.width;
        width = max_width;
        height = img.height * ratio;
    }
    else {
        width = img.width;
    }

    // Resize images (height)
    if (img.height > max_height) {
        ratio = max_height / img.height;
        height = max_height;
        width = img.width * ratio;
    } 
    else {
        height = img.height;
    }

    // Adjust canvas
    canvas.width = width;
    canvas.height = height;

    // Draw canvas
    ctx.drawImage(img, 0, 0, width, height);
    url.revokeObjectURL(src);

}

Answer 1

编辑：当我回答这个问题时，这个问题是关于服务器端验证的。我的回答是 - 永远不要相信客户向您发送正确的数据！您可以验证客户端是否具有良好的用户体验，但您也应验证服务器端。

您可以尝试使用ImageMagick的identify命令或Linux file命令来查看文件的类型：

对于实际的JPG：

$ file IMAG0108.jpg
IMAG0108.jpg: JPEG image data, JFIF standard 1.01
$ identify IMAG0108.jpg
IMAG0108.jpg JPEG 480x852 480x852+0+0 8-bit DirectClass 75.4KB 0.000u 0:00.000

对于重命名为JPG的PDF：

$ mv CCF04262013.pdf CCF04262013.jpg
$ file CCF04262013.jpg
CCF04262013.jpg: PDF document, version 1.3
$ identify CCF04262013.jpg
CCF04262013.jpg PDF 595x775 595x775+0+0 16-bit Bilevel DirectClass 58.2KB 0.000u 0:00.000

只需弹出，运行命令，检查输出，然后关闭。确保用户不能将任意文件名作为shell-out的一部分传递（使用tempfiles）。

Answer 2

我找到了一些提示（可能不是最佳解决方案）

我添加了第二个画布：

<canvas id="canvas_preview"></canvas>
<canvas id='blank' style='display:none'></canvas>

检查我的主画布是否看起来像空白画布。我在'fadeIn'回调中编写了这段代码：

$("#canvas_preview").delay(2700).fadeIn(
    1500, 
    function(){ 
        if(document.getElementById("canvas_preview").toDataURL() == document.getElementById('blank').toDataURL()) {
            alert("Bad jpg");
        }
    }
);

谢谢大家！

使用虚假扩展验证图像类型

2 个答案: