这个 if/else Javascript 函数有什么问题？

Question

$('.chatterbox_comment_form').submit(function(e){
    e.preventDefault();

    var file        = $('#chatterbox_comment_file_upload_1')[0].files[0];
    var reader      = new FileReader();
    var white_space = /^\s+$/;
    var file_val    = $('#chatterbox_comment_file_upload_1').val();
    var exts        = ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'svg'];
    var comment_textarea = $('.form_comment_input');

    if(!file) {

        if(comment_textarea.val() == '' || white_space.test(comment_textarea.val())) {  
            $('.chatterbox_comment_error').html("Can't be blank");
            comment_textarea.css('border', '1px solid #b20000');
        }
        else {
            socket.emit('chatterbox comment', comment_textarea.val(), user.name);
            $('.chatterbox_comment_error').html("");
            comment_textarea.css('border', '1px solid #ccc');
        }
    }
    else if(file)
    {

        var get_ext = file_val.split('.');

        get_ext = get_ext.reverse();

        if(!$.inArray(get_ext[0], exts) > -1) 
        {
            $('.chatterbox_comment_error').html('Only .jpg .png .bmp .gif .svg files are allowed');
        } 
        else 
        {
            // file_val exists and the extension is valid.
            reader.onload  = function(evt) {
                socket.emit('chatterbox comment', $('.form_comment_input').val(), user.name, evt.target.result);
            };

            reader.readAsDataURL(file);
            $('.chatterbox_comment_error').html("");
            comment_textarea.css('border', '1px solid #ccc');
        }

    } 

        $('#chatterbox_comment_file_upload_1').val('');
});

我想做的是在提交这个文本区域时，检查是否只有空白输入并检查上传的文件是否有效（png jpg bmp 或 svg），如果不是，则显示错误信息。如果有效，则将其发送到节点服务器。这个功能有点工作。它验证完全空白的输入，但是当尝试发送图像时它不会发送它并且它不会验证不正确的文件上传，例如 .pdf。我相信我的 if/else 陈述不知何故写错了。有什么建议么？干杯

这是 server.js 函数处理 socket.emit 调用

socket.on('chatterbox comment', function(data, username, image){
    console.log(data, username, image);
    // io.sockets.in(socket.room).emit('chatterbox comment', data, username, image);
});

Answer 1

看起来你有一个 else after 检查 file_val。我想你想在检查无效扩展后这样做。

这个怎么样？

   $('.chatterbox_comment_form').submit(function(e) {
        e.preventDefault();
    var file        = $('#chatterbox_comment_file_upload_1')[0].files[0];
    var reader      = new FileReader();
    var white_space = /^\s+$/;
    var file_val    = $('#chatterbox_comment_file_upload_1').val();
    var exts        = ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'svg'];

    if(!file_val) {
        // No file, 
        if(comment_textarea.val() == '' || white_space.test(comment_textarea.val())) {  
            $('.chatterbox_comment_error').html("Can't be blank");
            comment_textarea.css('border', '1px solid #b20000');
        }
        else {
            socket.emit('chatterbox comment', comment_textarea.val(), user.name);
            $('.chatterbox_comment_error').html("");
            comment_textarea.css('border', '1px solid #ccc');
        }
    }
    else {
        // If we have a file...

        var get_ext = file_val.split('.');

        get_ext = get_ext.reverse();

        // Fixes conditional issue
        if ($.inArray(get_ext[0], exts) == -1) {
            $('.chatterbox_comment_error').html('Only .jpg .png .bmp .gif .svg files are allowed');
        } else {
            // file_val exists and the extension is valid.
            reader.onload  = function(evt) {
                socket.emit('chatterbox comment', comment_textarea.val(), user.name, evt.target.result);
                console.log("reader.onload() - calling socket.emit()");
                console.log(comment_textarea.val(), user.name, evt.target.result);

                $('#chatterbox_comment_file_upload_1').val('');
            };

            reader.readAsDataURL(file);
            $('.chatterbox_comment_error').html("");
            comment_textarea.css('border', '1px solid #ccc');
        }
    }
});

这个 if/else Javascript 函数有什么问题？

What is wrong with this if/else Javascript function?

javascript

jquery

if-statement

socket.io