用于验证上传的文件是否为图像的Javascript无法正常工作

Question

I'm doing some web development using Django. There comes a part where user could upload images to my server.

Here is the Javascript side of the code.

var uploadField = document.getElementById("file_upload"); 

uploadField.onchange = function(){
    var file_type=this.file[0]['type']; // file_type = 'image/jpg'
    if (file_type.split('/')[0] !== 'image'){
        alert("Not an Image");
        this.value = "";
    }
    else if(this.files[0].size > 2097152){
        alert("File is too big!");
        this.value = "";
    }
    else{
        this.form.submit();
        document.getElementById('celimsg').innerHTML='Analyzing image...';
        document.getElementById('celi').src=gif_url;
    }
}

It didn't work. When the files are uploaded, nothing happens. But if I remove the validation part:

var uploadField = document.getElementById("file_upload");

uploadField.onchange = function(){
    if(this.files[0].size > 2097152){
        alert("File is too big!");
        this.value = "";
    }
    else{
        this.form.submit();
        document.getElementById('celimsg').innerHTML='Analyzing image...';
        document.getElementById('celi').src=gif_url;
    }
}

It started working again.

Unlike other web development platform, Django doesn't support debugging for javascript and I can't put print statements on it etiher.

Answer 1

Looks like I spelled 'files' incorrectly.

var uploadField = document.getElementById("file_upload");

uploadField.onchange = function(){
    var file_type=this.files[0]['type'];

    if (file_type.split('/')[0] !== 'image'){
        alert("Not an Image");
        this.value = "";
    }
    else if(this.files[0].size > 2097152){
        alert("File is too big! Keep it under 2MB.");
        this.value = "";
    }
    else{
        this.form.submit();
        document.getElementById('celimsg').innerHTML='Analyzing image...';
        document.getElementById('celi').src=gif_url;
    }
}

Cheers!