javascript - 如何验证动态添加的文本框和输入类型文本文件以在 php 中上传图像

Question

In given code i uses the text box and input type file dynamically using add and remove button.

添加按钮添加文本框并输入文件。 删除以删除表单中最后添加的文本框和类型文件元素。现在的问题是如何验证类型文件以允许在 javascript 中上传的文件使用 .jpg、.png、.bmpo 扩展文件。

          <form  id="co_com_form" name="co_com_form" method="get" action="">
                                        <div class="addmore-fields">
                                            <div class="field">
                                                 <button id='removeButton' class="button btn btn-primary btn-medium" style="float:right">remove</button>&nbsp;&nbsp;
                                                    <button id='addButton' class="button btn btn-primary btn-medium" style="float:right">add</button >
                                                <div id='TextBoxesGroup'>
                                                <br>
                                                    <div id="TextBoxDiv1">
                                                        <input type="text" name='co_com1' required placeholder="Co Company 1" style="float:left;width:250px;margin-bottom:10px"><br><br>
                                                        <input type="file" name='logo1' placeholder="CoCompany logo" style="float:left;width:250px;margin-bottom:20px">                     
                                                    </div>
                                                    <br>

                                                </div>

                                            </div> <!-- /field -->

                                        <div style="float:left; clear:both; margin-left:50px" >
                                        <br>
                                        <button class="button btn btn-primary btn-medium"  name="submit_co_com" type="submit" onclick="return validatecom();">Submit</button>
                                        <a href="javascript:void(0);" class="button btn btn-primary btn-medium" onClick="PopUp_com('hide','com_popup');">
                                            Cancel
                                        </a> 
                                        </div>
                                   </form>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
        $(document).ready(function(){


        //---------------add--------------------- 
            var counter=1;
            $("#addButton").click(function () {
            if(counter>10){
                    alert("Only 10 textboxes allow");
                    return false;
            }   
            if(counter==1){counter++;}
                //document.getElementById('removeButton').removeAttribute('style');
            var newTextBoxDiv = $(document.createElement('div'))
                 .attr("id", 'TextBoxDiv' + counter);

            newTextBoxDiv.after().html(
                  '<br>'+'<input type="text" name="co_com' + counter + 
                  '" id="textbox' + counter + '" value="" required  placeholder="Co Company '+ counter +'" style="width:250px;margin-bottom:10px" >'+'<br>'+'<input type="file" name="logo' + counter + 
                  '" id="filebox' + counter + '"  placeholder="Co Company logo'+ counter +'" style="width:250px" >');

            newTextBoxDiv.appendTo("#TextBoxesGroup");
                counter++;
             });
        //---------------remove--------------------- 
             $("#removeButton").click(function () {
            if(counter==1){

                  alert("No more textbox to remove");
                  return false;
               }   
            else
            {
                $("#TextBoxDiv" + counter).remove();
                counter--;

            }
             });
          });


        </script>                           

Answer 1

像这样使用

 <form  id="co_com_form" name="co_com_form" method="get" action="" onsubmit="return Validate(this);">
                                    <div class="addmore-fields">
                                        <div class="field">
                                             <button id='removeButton' class="button btn btn-primary btn-medium" style="float:right">remove</button>&nbsp;&nbsp;
                                                <button id='addButton' class="button btn btn-primary btn-medium" style="float:right">add</button >
                                            <div id='TextBoxesGroup'>
                                            <br>
                                                <div id="TextBoxDiv1">
                                                    <input type="text" name='co_com1' required placeholder="Co Company 1" style="float:left;width:250px;margin-bottom:10px"><br><br>
                                                    <input type="file" name='logo1' placeholder="CoCompany logo" style="float:left;width:250px;margin-bottom:20px">                     
                                                </div>
                                                <br>

                                            </div>

                                        </div> <!-- /field -->

                                    <div style="float:left; clear:both; margin-left:50px" >
                                    <br>
                                    <button class="button btn btn-primary btn-medium"  name="submit_co_com" type="submit" onclick="return validatecom();">Submit</button>
                                    <a href="javascript:void(0);" class="button btn btn-primary btn-medium" onClick="PopUp_com('hide','com_popup');">
                                        Cancel
                                    </a> 
                                    </div>
                               </form>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(document).ready(function(){


    //---------------add--------------------- 
        var counter=1;
        $("#addButton").click(function () {
        if(counter>10){
                alert("Only 10 textboxes allow");
                return false;
        }   
        if(counter==1){counter++;}
            //document.getElementById('removeButton').removeAttribute('style');
        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html(
              '<br>'+'<input type="text" name="co_com' + counter + 
              '" id="textbox' + counter + '" value="" required  placeholder="Co Company '+ counter +'" style="width:250px;margin-bottom:10px" >'+'<br>'+'<input type="file" name="logo' + counter + 
              '" id="filebox' + counter + '"  placeholder="Co Company logo'+ counter +'" style="width:250px" >');

        newTextBoxDiv.appendTo("#TextBoxesGroup");
            counter++;
         });
    //---------------remove--------------------- 
         $("#removeButton").click(function () {
        if(counter==1){

              alert("No more textbox to remove");
              return false;
           }   
        else
        {
            $("#TextBoxDiv" + counter).remove();
            counter--;

        }
         });
      });
      var _validFileExtensions = [".jpg", ".bmpo",".png"];

function Validate(co_com_form) {
    var arrInputs = co_com_form.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }

    return true;
}
    </script>