上面两个图片,第一个图片是初始状态,然后输入1,后台ajax获取后,将前端页面改成第二个图的样子,这个时候前端页面的表单,name为a1,但是提交后,后0台post不到a1。同时报错的时候,没有说我的a1未定义。```
前端
<!DOCTYPE html>
<html lang="en" class="ace ace-card-on ace-tab-nav-on ace-main-nav-on ace-sidebar-on" data-theme-color="#c0e3e7">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<title>个人简历</title>
</head>
<body>
<form method="POST" action="shengchengjianli.php">
<div id="ace-content" class="ace-container-shift">
<div class="ace-container">
<div class="ace-paper-stock">
<main class="ace-paper clearfix">
<div class="ace-paper-cont clear-mrg">
<!-- START: PAGE CONTENT -->
<div class="padd-box clear-mrg" style="text-align: center;">
<section id="section" class="section brd-btm" style="margin: 0 auto" >
<br />
<br />
<br />
<!--input8对应zhengshu-->
<input name="zhengshu" placeholder="请在此输入您的证书数量" style="text-align: center;" type="text" id="txt1" onkeyup="showHint(this.value)" />
<p>建议:<span id="txtHint">请在上面输入您的证书数量 </span></p>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var num= document.getElementById("txt1").value;
document.getElementById("txtHint").innerHTML="您一共上传"+num+"份证书,请你依次输入证书名字,并且上传证书照片";
document.getElementById("txt1").style.display="none"
for(var a =0;a<num;a++){
addimg();
}
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
var i=0
function addimg(){
var input=document.createElement("input");//创建input
input.setAttribute("type","text");//设置type属性
input.setAttribute("list","ide");//设置type属性
input.setAttribute("name","a"+(++i));//设置name属性
input.setAttribute("placeholder","输入您的证书名字(例如:英语四级证书)");
input.setAttribute("style","text-align: center;");
document.getElementById("section").appendChild(input);//插入到div内
var br=document.createElement("br");//创建input
document.getElementById("section").appendChild(br);//插入到div内
var input1=document.createElement("input");//创建input
input1.setAttribute("type","file");//设置type属性
input1.setAttribute("name","a"+(i));//设置name属性
input1.setAttribute("id",i);
input1.setAttribute("style","text-align: center;");
input1.setAttribute("placeholder","请输入您的熟练程度(1-100)");
input1.setAttribute("onchange","imgPreview(this)");
document.getElementById("section").appendChild(input1);//插入到div内
document.getElementById("section").appendChild(br);//插入到div内
var input2=document.createElement("img");//创建input
input2.setAttribute("id","preview"+i);//设置name属性
input2.setAttribute("style","width: 50px;height: 50px;");
document.getElementById("section").appendChild(input2);//插入到div内
document.getElementById("section").appendChild(br);//插入到div内
};
</script>
<script type="text/javascript">
function imgPreview(fileDom){
var id =fileDom.id;
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
} //获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview"+id);
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
<input type="submit" />
</section><!-- .section -->
</body>
</html>
``````
后台
<meta charset="utf-8">
<?php
echo "工作地:".$_POST['a1'];
?>
```
前端
<!DOCTYPE html>
<html lang="en" class="ace ace-card-on ace-tab-nav-on ace-main-nav-on ace-sidebar-on" data-theme-color="#c0e3e7">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<title>个人简历</title>
</head>
<body>
<form method="POST" action="shengchengjianli.php">
<div id="ace-content" class="ace-container-shift">
<div class="ace-container">
<div class="ace-paper-stock">
<main class="ace-paper clearfix">
<div class="ace-paper-cont clear-mrg">
<!-- START: PAGE CONTENT -->
<div class="padd-box clear-mrg" style="text-align: center;">
<section id="section" class="section brd-btm" style="margin: 0 auto" >
<br />
<br />
<br />
<!--input8对应zhengshu-->
<input name="zhengshu" placeholder="请在此输入您的证书数量" style="text-align: center;" type="text" id="txt1" onkeyup="showHint(this.value)" />
<p>建议:<span id="txtHint">请在上面输入您的证书数量 </span></p>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var num= document.getElementById("txt1").value;
document.getElementById("txtHint").innerHTML="您一共上传"+num+"份证书,请你依次输入证书名字,并且上传证书照片";
document.getElementById("txt1").style.display="none"
for(var a =0;a<num;a++){
addimg();
}
}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
var i=0
function addimg(){
var input=document.createElement("input");//创建input
input.setAttribute("type","text");//设置type属性
input.setAttribute("list","ide");//设置type属性
input.setAttribute("name","a"+(++i));//设置name属性
input.setAttribute("placeholder","输入您的证书名字(例如:英语四级证书)");
input.setAttribute("style","text-align: center;");
document.getElementById("section").appendChild(input);//插入到div内
var br=document.createElement("br");//创建input
document.getElementById("section").appendChild(br);//插入到div内
var input1=document.createElement("input");//创建input
input1.setAttribute("type","file");//设置type属性
input1.setAttribute("name","a"+(i));//设置name属性
input1.setAttribute("id",i);
input1.setAttribute("style","text-align: center;");
input1.setAttribute("placeholder","请输入您的熟练程度(1-100)");
input1.setAttribute("onchange","imgPreview(this)");
document.getElementById("section").appendChild(input1);//插入到div内
document.getElementById("section").appendChild(br);//插入到div内
var input2=document.createElement("img");//创建input
input2.setAttribute("id","preview"+i);//设置name属性
input2.setAttribute("style","width: 50px;height: 50px;");
document.getElementById("section").appendChild(input2);//插入到div内
document.getElementById("section").appendChild(br);//插入到div内
};
</script>
<script type="text/javascript">
function imgPreview(fileDom){
var id =fileDom.id;
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
} //获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview"+id);
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
<input type="submit" />
</section><!-- .section -->
</body>
</html>
``````
后台
<meta charset="utf-8">
<?php
echo "工作地:".$_POST['a1'];
?>
```
是有内容的