<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="divCss">
<form action="" method=" ">
<h3 style="text-align: center;width: 60%;">注 册 表</h3>
<p>
<label>姓名：</label>
<input type="text" name="username" id="name" class = "inputCSS required"/>
</p>
<p>
<label>密码：</label>
<input type="password" name="password" id="pass" class = "inputCSS required"/>
</p>
<p>
<label>性别：</label>
<label><input type="radio" name="gender" value="0" checked="checked"/> 男</label>
<label><input type="radio" name="gender" value="1" /> 女</label>
</p>
<p>
<label>爱好：</label>
<label><input type="checkbox" name="like" value="sing" checked /> 唱歌</label>
<label><input type="checkbox" name="like" value="run" /> 跑步</label>
<label><input type="checkbox" name="like" value="swiming" checked /> 游泳</label>
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic" id="person_pic">
</p>
<p>
<label for="email">电子邮箱：</label>
<input type="email" name="email" id="email" class = "inputCSS required">
</p>
<p>
<label for="date">出生日期：</label>
<input type="date" name="data" id="data" class = "inputCSS required">
</p>
<label>学历：</label>
<select name="site">
<optgroup label="研究生">
<option value="bs">博士</option>
<option value="bs">硕士</option>
</optgroup>
<optgroup label="大学">
<option value="bs" selected>本科</option>
<option value="bs">专科</option>
</optgroup>
<optgroup label="其它">
<option value="bs">自考</option>
<option value="bs">高中</option>
</optgroup>
</select>
</p>
<p>
<label>个人描述：</label><br />
<textarea name="about"></textarea>
</p>
<p>
<p>
<input type="submit" name="btn" value="提交" class="btnCSS">
<input type="reset" name="btn" value="重置" class="btnCSS">
</p>
<p class="formImg" ><img src="img/person.jpg" width="300px" id="myImg"/></p>
</form>
</div>
</body>
<script type="text/javascript">
//上传图片，使用原生js代码
var file = document.getElementById('person_pic');
file.onchange=function(){
var re=new FileReader();
console.log(file.files[0]);
re.readAsDataURL(file.files[0]);
re.onload = function(re){
var inpic = document.getElementById('myImg')
inpic.src = re.target.result
}
}
</script>
</html>
