javascript - 使用 jquery 检查输入类型文件

Question

如何检查类型文件的输入字段(大小、结尾(jpg、png、...))？ 在 my page如果您按下“Schritt hizufügen”按钮，您可以添加更多类型文件的输入字段。这是用于此的 jquery 代码:

    var max_fields      = 11; //maximum input boxes allowed
    var wrapper         = $(".all_steps"); //Fields wrapper
    var add_button      = $("#add_step"); //Add button ID
    var remove_step     = $("#remove_step");
    
    var x = 1; //initlal text box count
    add_button.click(function(){ //on add input button click
        if(x < max_fields){ //max input box allowed
            wrapper.append('<div class="step"><div class="header_step">Schritt '+ x +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" type="text" /><br><a class="create_tutorial_a">Bild</a><input type="file" id="input_image_name'+x+'" name="input_image_name'+x+'"/><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>');
            x++;
        }
    });

如果您按下“Erstellen”按钮，它会检查每个输入字段是否已填写。我想要一个扩展，它将检查输入字段的类型文件(结尾、大小、...)。我的提交功能:

 $('form.send').on('submit', function(){

        var empty = false;
        
        $('input[type="text"]').each(function(){
            if ($.trim($(this).val()) == '') {
                $(this).addClass("empty_field");
                empty = true;
            }
            else{
                $(this).removeClass("empty_field");
            }
        });

        $('textarea').each(function(){
            if ($.trim($(this).val()) == '') {
                $(this).addClass("empty_field");
                empty = true;
            }
            else{
                $(this).removeClass("empty_field");
            }
        });
   )};

这是表格:

        <form method="post" action="index.php?content=write_tutorial" class="send" enctype="multipart/form-data">
            <div class="step">
                <div class="header_step">Allgemeines zum Tutorial</div>
                <div class="body_step">
                    <a class="create_tutorial_a">Titel des Tutorial's</a><input class="create_tutorial_input" type="text" name="input_tutorialtitle_name"/>
                    <br>
                    <a class="create_tutorial_a">Autor des Tutorial's</a><input class="create_tutorial_input" type="text" name="input_tutorialauthor_name"/>
                    <br><br>
                    <a class="create_tutorial_a_full_width">Beschreibung des Tutorial's</a>
                    <br>
                    <textarea class="create_tutorial_textarea" name="input_tutorialdescription_name"></textarea>
                </div>
            </div>
        
            <div class="all_steps">
            
            </div>
        
            <div class="step">
                <div class="body_step">
                    <input class="create_button" type="submit" value="Erstellen"/>
                    <input type="button" class="create_button" id="add_step" value="Schritt hinzufügen"/>
                    <input type="button" class="create_button" id="remove_step" value="Schritt entfernen"/>
                </div>
            </div>
        </form>

我真的不知道。我现在搜索了很多，但没有找到一个很好的链接，这解释得很好。

Answer 1

您可以使用 accepts 属性。更改 JS 的这一部分:

<input type="file" id="input_image_name'+x+'" name="input_image_name'+x+'"  accept="image/png, image/jpeg" />

对于文件大小，您可以使用 Javascript:

var size = document.getElementById("input_image_name1").files[0].size;

但是一定要在服务器端也进行这些检查，在客户端进行检查应该只被视为一种可用性功能，尤其是当网站暴露给未洗过的公众时。