<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自我介绍表格——SelfIntroductuonTable.html</title><script type="text/javascript" src="SelfIntroductuonTable.js"></script><style type="text/css">#table1{border-radius:1px solid #000;width: 600px;border-collapse:collapse;margin: 0 auto;}#tr1{height:30px}td{border: 1px solid #000;font-size: 10pt;font-weight: bold;text-align: center;}#uname,#age,#password1,#password2,#color{width: 280px;height: 25px;}#introduction{width:280px;height: 60px;}</style></head><body><form id="fontTable1" name="fontTable" method="post" action="database.php" onsubmit="return validate()" enctype="multipart/form-data"><table id="table1" name="table1" ><tr id="tr1"><td colspan="3" align="3">自我介绍</td></tr><tr><td width="120px">名字：</td><td width="300px"><input type="text" name="uname" id="uname"></td><td width="180px">必须在6—20个字母之间</td></tr><tr id="tr1"><td>性别：</td><td><input type="radio" name="gender" id="gender" value="男" >男<input type="radio" name="gender" id="gender" value="女" >女</td><td></td></tr><tr id="tr1"><td>年龄：</td><td><input type="text" name="age" id="age" required="required"></td><td>取值在0——100之间</td></tr><tr id="tr1"><td>个人密码：</td><td><input type="passward" name="password1" id="password1" required="required"></td><td>6——10个字符</td></tr><tr id="tr1"><td>确认密码：</td><td><input type="passward" name="password2" id="password2"></td><td>与个人密码相同</td></tr><tr id="tr1"><td>你的爱好：</td><td><input type="checkbox" name="like[]" value="看书" >看书<input type="checkbox" name="like[]" value="打篮球" >打篮球<input type="checkbox" name="like[]" value="游泳" >游泳</td><td></td></tr><tr id="tr1"><td>你最喜欢的颜色：</td><td><select name="color" id="color" align="center" ><option value="红色">红色</option><option value="黄色">黄色</option><option value="蓝色" selected="selected">蓝色</option><option value="黑色">黑色</option></select></td><td></td></tr><tr id="tr1" height="65px"><td>个人介绍</td><td><textarea name="jieshao" id="introduction" required="required"></textarea></td><td>不能为空</td></tr><tr><td>请上传头像文件</td><td><p><input type="file" name="file1[]" id="file1" multiple></p></td><td>必须上传头像文件</td></tr><tr id="tr1"><td colspan="3" align="center"><button type="submit" value="提交" >提交</button> <button type="rest" name="重置">重置</button></td></tr></table></form></body></html>// 表单提交java scrip// function关键字定义函数function validate(){// 用户名限制// 获取用户名// 使用document.getElementById('uname')获取id属性是uname的表单元素// 然后使用属性value获取文本框中输入的数组，放在变量uname中保存；var uname=document.getElementById('uname').value;var len=uname.length;// 判断len的取值是否为6~20个字符之间，如果不是，则使用alert（）函数弹出指定的提示信息// 使用return false 语句返回函数的结果为false，结束函数的执行过程if(len<6||len>20){alert('姓名必须在6~20个字符之间，请重新输入!');return false;// return的作用将页面运行过程停留在当前界面，而不用吧不符合要求的数据提交到服务器端 }// 判断年龄是否在0~100之间var age=document.getElementById('age').value;if (age<0 ||age>100) {alert('年龄必须在0~100之间,请重新输入!');return false;}// 密码和确认密码相同验证var password1=document.getElementById('password1').value;var password2=document.getElementById('password2').value;var passwordLen1=password1.length;if (passwordLen1<6||passwordLen1>10) {alert('密码必须在6~10个字符之间请重新输入');return false;}if (password2!=password1) {alert('两次输入,密码不相同，请重新输入！');return false;}// var introduction=document.getElementById('introduction').value;// if (introduction!=" ") {// alert('个人介绍不能为空，请重新输入！');// return false;// }}<!-- form.php --><?php header("Content-Type:text/html;charset=UTF-8");echo "尊重的用户你好，您输入的信息如下：<br><hr>";echo "您输入的用户名是：".$_POST["uname"]."<br>";echo "您输入的性别是：".$_POST["gender"]."<br>";echo "您输入的年龄是：".$_POST["age"]."<br>";echo "您输入的密码是：".$_POST["password1"]."<br>";if (isset($_POST['like'])){$like=implode(",", $_POST['like']);echo '你的兴趣爱好是：'.$like.'<br>';}else{echo "您没有输入兴趣爱好";}echo "您喜欢的颜色是：".$_POST["color"]."<br>";echo "您的个人介绍是：".$_POST["jieshao"]."<br>";?><?php// 接收文件--UploadFilesDatabase.php// 在当前页面中显示上传文件的名称，文件的类型，文件大小（以KB表示）。临时文件的名称等等内容header("Content-Type:text/html;charset=UTF-8");$name=$_FILES['file1']['name'];$type=$_FILES['file1']['type'];$size=round($_FILES['file1']['size']/1024,2).'KB';$tmpname=$_FILES['file1']['tmp_name'];echo "你上传的文件名称为：".$name.'<br>';echo "你上传的文件类型为：".$type.'<br>';echo "你上传的文件大小为：".$size.'<br>';echo "你上传的文件临时位置临时名称为：".$tmpname.'<br>';// 将上传后的文件移动到指定的位置并按照指定的名称来保存 move_uploaded_file()$ftmpname=$_FILES['file1']['tmp_name'];$ftname=iconv("UTF-8", "GB2312",$_FILES['file1']['name'] );// move_uploaded_file()只支持GB2312或者GBk编码，并不支持UTF-8编码，如果页面字符集编码类型是UTF-8，并且上传的文件名称包含汉字，该函数可能无法执行成功。因此，将使用iconv（）函数转换名称中的汉字编码来解决问题move_uploaded_file($ftmpname,"picture/$ftname");echo "您的照片为：<img src='picture/$ftname'>";?>
