1

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」は真、「exemple_2.pdf」は偽です。2 番目のファイルの名前を「exemple_2.jpg」のように変更すると、それは true になりますが、false にする必要があります。

ファイルが実際の 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);

}
4

2 に答える 2

0

編集：この質問に答えたとき、この質問はサーバー側の検証に関するものでした。私の答えは次のとおりです。クライアントが適切なデータを送信するとは決して信じないでください。優れた UX についてクライアント側を検証できますが、サーバー側も検証する必要があります。

ImageMagick の identify コマンドまたは Linuxfileコマンドを使用して、ファイルの種類を確認できます。

実際の 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

シェルアウトして、コマンドを実行し、出力を確認してください。ユーザーがシェルアウトの一部として任意のファイル名を渡すことができないことを確認してください (一時ファイルを使用)。

于 2013-05-03T17:11:48.273 に答える
0

ヒントを見つけました (最善の解決策ではないかもしれません)

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");
        }
    }
);

みんなありがとう！

于 2013-05-03T21:44:33.973 に答える