ตรวจสอบความกว้างและความสูงของรูปภาพก่อนอัปโหลดด้วย Javascript

ฉันมี JPS ที่มีรูปแบบที่ผู้ใช้สามารถใส่รูปภาพได้:

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

ฉันเขียน js นี้แล้ว:

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}

ซึ่งใช้งานได้ดีในการตรวจสอบประเภทและขนาดไฟล์ ตอนนี้ฉันต้องการตรวจสอบความกว้างและความสูงของภาพ แต่ไม่สามารถทำได้
ฉันได้พยายามที่มีแต่ฉันได้รับtarget.files[0].width undefinedด้วยวิธีการอื่น ๆ 0ที่ฉันได้รับ
ข้อเสนอแนะใด ๆ ?

ไฟล์เป็นเพียงไฟล์คุณต้องสร้างภาพดังนี้:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

การสาธิต: http://jsfiddle.net/4N6D9/1/

ฉันคิดว่าคุณรู้ว่าสิ่งนี้รองรับในเบราว์เซอร์บางตัวเท่านั้น ส่วนใหญ่ firefox และ chrome อาจเป็นโอเปร่าได้เช่นกันในตอนนี้

ป.ล. เมธอด URL.createObjectURL () ถูกลบออกจากอินเทอร์เฟซ MediaStream วิธีนี้เลิกใช้แล้วในปี 2013 และแทนที่ด้วยการกำหนดสตรีมให้กับ HTMLMediaElement.srcObject วิธีการเดิมถูกลบออกเนื่องจากมีความปลอดภัยน้อยกว่าทำให้ต้องเรียก URL.revokeOjbectURL () เพื่อสิ้นสุดสตรีม ตัวแทนผู้ใช้รายอื่นได้เลิกใช้ (Firefox) หรือลบ (Safari) คุณลักษณะนี้

สำหรับข้อมูลเพิ่มเติมโปรดดูที่นี่

ในมุมมองของฉันคำตอบที่สมบูรณ์แบบที่คุณต้องมีคือ

var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

//Initiate the JavaScript Image object.
var image = new Image();

//Set the Base64 string return from FileReader as source.
image.src = e.target.result;

//Validate the File Height and Width.
image.onload = function () {
  var height = this.height;
  var width = this.width;
  if (height > 100 || width > 100) {
    alert("Height and Width must not exceed 100px.");
    return false;
  }
  alert("Uploaded image has valid Height and Width.");
  return true;
};

ฉันเห็นด้วย. เมื่ออัปโหลดไปยังที่ใดที่หนึ่งเบราว์เซอร์ของผู้ใช้สามารถเข้าถึงได้แล้วมันก็ค่อนข้างง่ายที่จะรับขนาด ในขณะที่คุณต้องรอให้รูปภาพโหลดคุณจะต้องเข้าร่วมonloadกิจกรรมimgนี้

var width, height;

var img = document.createElement("img");
img.onload = function() {
    // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height
    // The natural size is the actual image size regardless of rendering.
    // The 'normal' width/height are for the **rendered** size.

    width  = img.naturalWidth  || img.width;
    height = img.naturalHeight || img.height; 

    // Do something with the width and height
}

// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";

นี่เป็นวิธีที่ง่ายที่สุดในการตรวจสอบขนาด

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   alert(img.width + " " + img.height);
}

ตรวจสอบขนาดที่เฉพาะเจาะจง โดยใช้ 100 x 100 เป็นตัวอย่าง

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   if(img.width === 100 && img.height === 100){
        alert(`Nice, image is the right size. It can be uploaded`)
        // upload logic here
        } else {
        alert(`Sorry, this image doesn't look like the size we wanted. It's 
   ${img.width} x ${img.height} but we require 100 x 100 size image.`);
   }                
}

ฟังก์ชัน validateimg (ctrl) {

        var fileUpload = $("#txtPostImg")[0];


        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (fileUpload.files) != "undefined") {

                var reader = new FileReader();

                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {

                    var image = new Image();

                    image.src = e.target.result;
                    image.onload = function () {

                        var height = this.height;
                        var width = this.width;
                        console.log(this);
                        if ((height >= 1024 || height <= 1100) && (width >= 750 || width <= 800)) {
                            alert("Height and Width must not exceed 1100*800.");
                            return false;
                        }
                        alert("Uploaded image has valid Height and Width.");
                        return true;
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }

แนบฟังก์ชันเข้ากับวิธีการ onchange ของไฟล์ประเภทอินพุต / onchange = "validateimg (this)" /

   function validateimg(ctrl) { 
        var fileUpload = ctrl;
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (fileUpload.files) != "undefined") {
                var reader = new FileReader();
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height < 1100 || width < 750) {
                            alert("At least you can upload a 1100*750 photo size.");
                            return false;
                        }else{
                            alert("Uploaded image has valid Height and Width.");
                            return true;
                        }
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }

function uploadfile(ctrl) {
    var validate = validateimg(ctrl);

    if (validate) {
        if (window.FormData !== undefined) {
            ShowLoading();
            var fileUpload = $(ctrl).get(0);
            var files = fileUpload.files;


            var fileData = new FormData();


            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }


            fileData.append('username', 'Wishes');

            $.ajax({
                url: 'UploadWishesFiles',
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function(result) {
                    var id = $(ctrl).attr('id');
                    $('#' + id.replace('txt', 'hdn')).val(result);

                    $('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();

                    HideLoading();
                },
                error: function(err) {
                    alert(err.statusText);
                    HideLoading();
                }
            });
        } else {
            alert("FormData is not supported.");
        }

    }