如何在 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>
<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>
<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>
相关文章:
- 使用不带文本文件的OpenLayers显示POI
- 使用javascript从文本文件中获取值
- 从javascript中的文本文件中获取值
- 在移动浏览器上显示大型文本文件
- 搜索文本文件并附加到表中
- 将文本文件加载到javascript中
- Angular http.get没有'我不喜欢在开头和结尾加方括号的文本文件
- 一个javascript实现base64图像编码并将结果写入文本文件
- 用javascript读取文本文件的第一行
- 从文本文件js中读取列表
- 使用JavaScript将压缩文本文件加载到字符串中
- 数组在手动写入时有效,但从文本文件加载时无效
- 在浏览器中打开文本文件-服务器上出现错误
- html表单,它有文本和表,现在我想在一个简单的文本文件中保存和检索数据,如何实现它
- 任何编写文本文件并将其替换为上一个文本文件的方法
- html或java脚本代码在硬盘中创建一个文本文件
- Firefox插件:保存到文本文件的HTTP日志,其中包含时间、用户名、计算机名;t创建文本文件
- 从文本文件加载jsondata时出现空白页
- 如何在不干扰电子邮件通知的情况下将眼镜保存在文本文件中
- 使用javascript创建新的文本文件(),但存储[objectFile]而不是文本