Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page?
This is the solution:
$("#file").change(function (event) {
var file = this.files[0];
if (file) {
var imagefile = file.type;
var match = ["image/jpeg", "image/png", "image/jpg", "image/tiff"];
if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile ==
match[2]))) {
$('#portal_introduce_file').val("");
this.files = null;
alert("有効な画像ファイルを選択してください。\n注:許可される画像タイプは jpeg、png、jpg、tiff、pngのみです。")
return false;
} else {
// 画像の寸法を取得するヘルパー
img = new Image();
img.src = URL.createObjectURL(file);
// 次のハンドラーは、画像が正常に読み込まれた後に起動します
img.onload = function () {
debugger
if (img.width <= 750 && img.height <= 170) {
$('#portal_introduce_file').val(file.name);
}
else {
alert('「' + img.width + 'x' + img.height + '」' + 'サイズが無効です。\n' + '画像: 750x170ビクセルで作成');
$('#portal_introduce_file').val("");
}
};
img.onerror = function () {
alert('画像に問題がありました。')
$('#portal_introduce_file').val("");
};
}
}
});