Question

我使用输入类型文件时遇到问题

代码如下所示，

默认输入文件：

<div id="div_attachment">
   <input name="f_attachment[]" type="file" class="file" id="f_attachment">
   <input type="button" id="tb_more_files" value="more file"/>
</div>

和jquery代码：

$("input#tb_more_files").click(function(){
   var new_file = $("<div><input id='f_attachment' name='f_attachment[]' type='file' class='file'/><input type='button' id='tb_remove' class='remove_file'></div>");
   $("div#div_attachment").append(new_file);
});

我用这个验证附件文件的扩展名：

f_attachment = $("input#f_attachment").val();
FileType = f_attachment.split('.').pop().toLowerCase();

   if(f_attachment == null || f_attachment == ""){
       alert("Attachment is Empty");
   }else if($.inArray(FileType, ['gif','png','jpg','jpeg']) == -1){
       alert("Invalid Type of File Attachment");
   }

问题是，当我点击更多文件按钮时和输入文件元素出现，当它具有空值或空值或不同的文件类型验证时，我无法验证它！

我尝试使用.live（）方法，但我不知道如何......

请帮忙！

Answer 1

$('#div_attachment').on("change",".file", function(event) {
  value = $(this).val(); // the value of the file element
  // do validation
});

这会在元素change（您的父div）中使用类file监听所有元素上的div_attachment事件并处理您的验证。使用on()意味着即使是新创建的DOM元素也将应用事件处理程序

您需要注意的一件事是为多个元素使用相同的ID - 您最好使用类。

更新

要执行检查onsubmit()，请使用each()方法：

$('.file').each(function(index) {
    value = $(this).val();
    // some validation for $(this) using value
});

注意：使用$('.file')选择器可获取类file

的所有元素

Docs for each()， Docs for on()

Answer 2

为你创造了一个完整的小提琴; http://jsfiddle.net/7KLA6/

更新根据要求添加代码

<强> HTML

<form name="myForm" enctype="multipart/form-data" method="post" action="">

<div id="div_attachment">
   <input name="f_attachment[]" type="file" class="file" id="f_attachment">
   <input type="button" id="tb_more_files" value="Add extra file" />
</div>

<input type="submit" id="submit_button" value="Submit form" />

</form>

<强>的JavaScript

// Add file input
$("input#tb_more_files").click(function() {

    var new_file = $("<div><input name='f_attachment[]' type='file' class='file'/><input type='button' class='remove_file' value='Remove' /></div>");
    $("div#div_attachment").append(new_file);

});

// Remove added file input
$('#div_attachment').on('click', 'input.remove_file', function() {

    $(this).parent().remove();

});

// Validate on submit
$('form').submit(function() {

    var $form = $(this);
    var validForm = true;

    $form.find('input.file').each(function() {

        var $this = $(this);
        var fileName = $this.val();
        var fileType = fileName.split('.').pop().toLowerCase();

        if (fileName == null || fileName == "") {
            console.log("Attachment is Empty"); // DEBUG
            validForm = false;
        } else if ($.inArray(fileType, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            console.log("Invalid Type of File Attachment"); // DEBUG
            validForm = false;
        }

        if (!validForm) {
            $this.css('color', 'red').focus();
            // Notice that only the last input will get the focus.
        }
    });

    console.log('Valid form =', validForm); // DEBUG
    return validForm;
});

Answer 3

<form name="myForm" enctype="multipart/form-data" action="" onsubmit="return  validateForm()" method="post">
        <input type="file" id="browse" name="browse" size="" placeholder="Photo" class="upload"/>


<input type="submit" name="submit" value="Submit"/>
</form>

<script>
function validateForm() {
    var x = document.forms["myForm"]["browse"].value;
    if (x == null || x == "") {
      //do somthing
        return false;
    } else {
      //do somthing
    }
}
</script>

验证新创建的元素

3 个答案:

更新