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>
<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>
答案 0 :(得分：2)
像这样使用
<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>
<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>