<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body{
margin-top: 20px;
}
.pic {
position: relative;
}
.pic img{
position: absolute;
left:5%;
top: 5%;
}
</style>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group pic_head">
<label for="file_upload" class="col-sm-2 control-label">头像</label>
<div class="col-sm-9">
<input id="file_upload" class="form-control" type="file" />
</div>
</div>
<div class="image_container pic">
<img id="preview" width="60" height="60">
</div>
<div class="form-group">
<label for="num" class="col-sm-2 control-label">*学号</label>
<div class="col-sm-9 fa">
<input type="text" class="form-control" id="num" placeholder="160109001" >
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">*姓名</label>
<div class="col-sm-9 n">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-9">
<label class="checkbox-inline s">
<input type="radio" name="optionsRadiosinline" id="optionsRadios1" value="男" checked>男
</label>
<label class="checkbox-inline se">
<input type="radio" name="optionsRadiosinline" id="optionsRadios2" value="女" >女
</label>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">生日</label>
<div class="col-sm-9 bir" >
<input type="date" id="birthday" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="ID" class="col-sm-2 control-label">身份证</label>
<div class="col-sm-9 my_Id">
<input type="text" class="form-control" id="ID" placeholder="请输入身份证">
</div>
</div>
<div class="form-group" >
<label for="state" class="col-sm-2 control-label">政治面貌</label>
<div class="col-sm-9" id="state">
<select class="form-control sta ">
<option selected>团员</option>
<option>党员</option>
<option>普通人员</option>
</select>
</div>
</div>
<div class="form-group">
<label for="major" class="col-sm-2 control-label">专业</label>
<div class="col-sm-9" id="major">
<select class="form-control ma">
<option selected>计算机科学与技术</option>
<option>外语</option>
<option>土木</option>
<option>机械</option>
<option>电子</option>
</select>
</div>
</div>
<div class="form-group">
<label for="college" class="col-sm-2 control-label">学院</label>
<div class="col-sm-9" id="college">
<select class="form-control coll">
<option selected>计算机科学与工程学院</option>
<option>外语学院</option>
<option>土木学院</option>
<option>机械学院</option>
<option>电子学院</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">*籍贯</label>
<div class="col-sm-3 c1">
<select class="form-control country">
<option selected>中国</option>
<option>芬兰</option>
<option>美国</option>
<option>英国</option>
<option>新西兰</option>
</select>
</div>
<div class="col-sm-3 c2" >
<select class="form-control province ">
<option selected>湖南</option>
<option>四川</option>
<option>北京</option>
<option>重庆</option>
<option>广西</option>
</select>
</div>
<div class="col-sm-3" id="country">
<select class="form-control city">
<option selected>青岛</option>
<option>成都</option>
<option>绵阳</option>
<option>眉山</option>
<option>乐山</option>
</select>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手机号码</label>
<div class="col-sm-9 phon">
<input type="number" class="form-control" id="phone" placeholder="请输入手机号码">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">密码</label>
<div class="col-sm-9 pass">
<input type="password" class="form-control" id="pwd" placeholder="*******">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-9 butt">
<button type="button" class="btn btn-default" id="btn">保存</button>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>
$(function () {
$("#file_upload").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
}else{
dataURL = $file.val();
var imgObj = document.getElementById("preview");
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});//实现头像上传显示
$("#btn").click(function () {
var pic= $("<lable>" + "</lable>");
$(".pic_head").html(pic);//头像
var txt = $("#num").val();
//alert(txt);
txt2 = $("<lable>" + txt + "</lable>");
//或者 var txt2 = "<lable>" + txt + "</lable>";
$(".fa").html(txt2);//学号
var myName = $("#name").val();
var oName= $("<lable>" + myName + "</lable>");
$(".n").html( oName);//姓名
var myBir = $("#birthday").val();
var oBir= $("<lable>" + myBir + "</lable>");
$(".bir").html( oBir);//生日
var myID = $("#ID").val();
var oID= $("<lable>" + myID + "</lable>");
$(".my_Id").html( oID);//身份证
var myPhone = $("#phone").val();
var oPhone= $("<lable>" + myPhone + "</lable>");
$(".phon").html( oPhone);//电话
var sex = $("input[type='radio']:checked").val();
var oSex= $("<lable>" +sex + "</lable>");
var oSex2= $("<lable>" + "</lable>");
$(".s").html(oSex);
$(".se").html(oSex2);//性别
var va = $(".sta").val();
//alert(va);
var oState= $("<lable>" + va + "</lable>");
$("#state").html( oState); //政治面貌
var ma = $(".ma").val();
var oMajor= $("<lable>" + ma + "</lable>");
$("#major").html( oMajor); //专业
var coll = $(".coll").val();
var oColl= $("<lable>" + coll + "</lable>");
$("#college").html(oColl); //学院
var country = $(".country").val();
var oCountry= $("<lable>" + country + "</lable>");
$(".c1").html( oCountry); //籍贯
var province = $(".province").val();
var oProvince= $("<lable>" + province + "</lable>");
$(".c2").html( oProvince); //籍贯
var city = $(".city").val();
var oCity= $("<lable>" +city + "</lable>");
$("#country").html( oCity); //籍贯
$("#pwd").prop("pwd","123456");
var myPwd = $("#pwd").val();
//alert(myPwd);
$("#pwd").prop("pwd",myPwd);
var opwd= $("<lable>" + myPwd + "</lable>");
$(".pass").html( "********");//密码
})
})
</script>
</body>
</html>
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
