1

input[type=file] で選択した画像の幅が正確に 700 px であるかどうかを確認する関数を作成しようとしていました。そうでない場合は、この画像を拒否します。成功しましたが、この関数がランダムに 0 を返す場合があり、幅が正しく読み取られるまで同じ画像を数回ロードする必要があります。このコードを改善する方法についてのアイデアはありますか? 前もって感謝します！

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image;
            img.src = e.target.result;
            if(img.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + img.width + " px wide. Try again!");
                input.value = "";
            }
        };
        reader.readAsDataURL(input.files[0]);
    }
4

1 に答える 1

3

.onload画像がロードされたときにのみ関数がトリガーされるように使用します。

 if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image;


            img.onload = function(){
            if(img.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + img.width + " px wide. Try again!");
                input.value = "";
            }
          }


            img.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }

または、イベント リスナーを追加できます。

img.addEventListener("load", function() {
     if(this.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + this.width + " px wide. Try again!");
                input.value = "";
     }
});

ただし、ie の場合は ie9 以降のみがサポート.addEventListenerされるため、ie8 以下の場合は使用します.attachEvent

img.attachEvent("onload", function() {});

if ステートメントを実行して、ブラウザがサポートしているかどうかを確認できます .addEventListener。

if (img.addEventListener)
//return false if broswer does not support
于 2013-09-30T01:50:36.747 に答える