Question

如何查看类型文件的inut字段（大小，结尾（jpg，png，...））？在my page上，如果按下“Schritthizufü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

您可以使用accep属性。更改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;

但是一定要在服务器端进行这些检查，将其作为客户端应该被视为可用性功能，特别是如果该网站暴露给未经洗涤的公众。

用jquery检查输入类型文件

1 个答案: