这个 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 语句在某种程度上是错误的。有什么建议？干杯

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

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