用于验证上传文件是否为图像的 Javascript 不起作用答案

【问题标题】：Javascript for validating if uploaded file is image isn't working用于验证上传文件是否为图像的 Javascript 不起作用
【发布时间】：2018-08-30 16:06:55
【问题描述】：

我正在使用 Django 进行一些 Web 开发。有一部分用户可以将图像上传到我的服务器。

这里是代码的 Javascript 部分。

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;
    }
}

没有用。上传文件后，什么也没有发生。但如果我删除验证部分：

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;
    }
}

它又开始工作了。

与其他 Web 开发平台不同，Django 不支持调试 javascript，我也无法在其上添加打印语句。

【问题讨论】：

使用console.log 在浏览器控制台中查看file_type 的值。
@5Volts 你不能在 Chrome 或其他浏览器中运行它并使用开发者工具吗？
在您希望浏览器的调试器停止执行并退出到开发工具的位置插入 debugger; 语句。
我添加了一个 console.log(file_type);并查看 Uncaught TypeError: Cannot read property '0' of undefined at HTMLInputElement.uploadField.onchange (one_button.js:5)。现在调查一下
添加console.log(this.file) 或console.log(this.file[0]) 等，直到你找到有趣的东西（或插入debugger; 语句并在调试器中以交互方式查看所有变量..）

标签： javascript python django web-development-server

【解决方案1】：

我好像拼错了“文件”。

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;
    }
}

干杯！

【讨论】：