CODEWITHSUNDEEP
jquery
홍의숙
홍의숙

Reputation: 317

Checking image size logic using jQuery

I made the function which is for checking images' size before submit. It works without error but i found the exception that the images are allowed to upload if it contains only one image is correct size. This happen occurs because of the incorrect boolean. I know how can I detect this in dirty way I know my code is dumb but could you guys check my code?

function check_scr_img_size() {
var img_size;
var ss = $('.tmp_screenshot').length;
console.log("업로드할 스크린샷 갯수 : "+  ss);

var scr = [];
for (var i = 0 ; i < ss ; i ++) {
    console.log("check_scr_img_size");
    scr[i] = document.getElementById('tmp_scr'+i);
    console.log(scr[i].naturalWidth + " , " + scr[i].naturalHeight);

    if(scr[i].naturalWidth == 1440 && scr[i].naturalHeight == 810) {
        img_size = true;
    }else {
        img_size = false;
    }
}

if (img_size) {
    console.log("check_scr_img_size : true");
    return true;
}else {
    console.log("check_scr_img_size : false");
    if (lang == "ko") {
        popup("스크린샷 이미지를 확인해 주세요. (사이즈 : 1440 X 810");
    }else {
        popup("Please check your screenshots images (size : 1440 X 810");
    }
    return false;
}
}

How can I fix this? Please let me know the way that I can modify my code more clean and optimized.

I tried it and the log is like this.

스크린샷 존재 업로드할 스크린샷 존재 업로드할 스크린샷 갯수 : 2 // The 2files have to be uploaded. check_scr_img_size 518, 346 // The first image size check_scr_img_size 1440, 810 // The second image size check_scr_img_size : true // It turns to true 스크린샷 존재 && 업로드할 스크린샷 존재 && 업로드할 스크린샷 사이즈 일치

The bool is just changed if the last image is true.

I changed the code like this that you said.

function check_scr_img_size() {
var img_size=true;
var ss = $('.tmp_screenshot').length;
console.log("업로드할 스크린샷 갯수 : "+  ss);

var scr = [];
for (var i = 0 ; i < ss ; i ++) {
    console.log("check_scr_img_size ");
    scr[i] = document.getElementById('tmp_scr'+i);
    console.log(scr[i].naturalWidth + " , " + scr[i].naturalHeight);

     if(!scr[i].naturalWidth == 1440 && !scr[i].naturalHeight == 810) {
         //img_size = true;
     //}else {
         img_size = false;
     }
 }

if (img_size) {
    console.log("check_scr_img_size : true");
    return true;
}else {
    console.log("check_scr_img_size : false");
    if (lang == "ko") {
        popup("스크린샷 이미지를 확인해 주세요. (사이즈 : 1440 X 810");
    }else {
        popup("Please check your screenshots images (size : 1440 X 810");
    }
    return false;
}
}

Thank you it works properly. I changed the(!scr[i].naturaWidth == 1440 && !scr[i].naturalHeight == 810) to scr[i].naturalWidth != 1440 && scr[i].naturalHeight != 810 and i also added the break; after img_size = false;. I'm really appreciate your help :-)

Upvotes: 1

Views: 53

Answers (2)

u_mulder
u_mulder

Reputation: 54796

Just remove setting img_size to true. Instead init img_size with true:

var img_size = true;
// in your loop:
// ...
if(scr[i].naturalWidth != 1440 && scr[i].naturalHeight != 810) {
    img_size = false;
}

So you will always get false if some bad image received.

Upvotes: 3

vanntile
vanntile

Reputation: 2787

You could try this:

function check_scr_img_size() {
    var img_size = true,
        ss = $('.tmp_screenshot').length,
        scr = [];
    console.log("업로드할 스크린샷 갯수 : " + ss);
    for (var i = 0; i < ss; i++) {
        if (img_size === true) {
            console.log("check_scr_img_size");
            scr[i] = document.getElementById('tmp_scr' + i);
            console.log(scr[i].naturalWidth + " , " + scr[i].naturalHeight);
            if (scr[i].naturalWidth != 1440 || scr[i].naturalHeight != 810) {
                img_size = false;
            }
        }
    }
    if (img_size) {
        console.log("check_scr_img_size : true");
        return true;
    } else {
        console.log("check_scr_img_size : false");
        if (lang == "ko") {
            popup("스크린샷 이미지를 확인해 주세요. (사이즈 : 1440 X 810");
        } else {
            popup("Please check your screenshots images (size : 1440 X 810");
        }
        return false;
    }
}

Upvotes: 1

Related Questions