用jQuery检查输入类型文件

Question

如何检查类型文件的inut字段（大小，结尾（jpg，png，...））？ 如果您按下“ 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

您可以使用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;

但是请确保也要在服务器端进行这些检查，将客户端做为可用性功能应该被看作是一项可用性功能，尤其是在该站点暴露于未经清洗的公众的情况下。