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


how to validate dynamicaly added textbox and input type text file for image upload in php

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

按钮以添加文本框并键入文件。删除以删除上次添加的文本框并在form中键入文件元素.now prob是如何验证类型文件以允许在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>                           

这样用

 <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>