<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
<style>
.login{
600px;
margin: 0 auto;
padding: 20px;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="login">
<h3>用户注册</h3>
<div style="position: relative;height:80px; 80px;">
<img id="previewImg" style="height:80px; 80px;" src="/static/imgs/default.png">
<input id="imgSelect" style="position: absolute;height:80px; 80px;top:0;left: 0;opacity: 0;" type="file" />
</div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="用户名" name="user">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="密码" name="pwd">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="确认密码" name="pwd2">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">验证码</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="密码" name="code">
</div>
<div class="col-sm-5">
<img style=" 120px;height: 30px;" src="/check_code/">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="注册" />
</div>
</div>
</form>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
bindAvatar();
});
function bindAvatar(){
if(window.URL.createObjectURL){
bindAvatar2();
}else if(window.FileReader){
bindAvatar3()
}else{
bindAvatar1();
}
}
// 上传头像到服务器并预览
function bindAvatar1() {
$("#img2").change(function () {
// 获取随机字符串
var token = $.cookie("csrftoken");
// 获取文件对象
var obj = $(this)[0].files[0];
var form = new FormData();
form.append("fafafa",obj);
$.ajax({
url:"/upload/",
type:"post",
data:form,
headers:{"X-CSRFToken":token},
contentType:false,
processData:false,
success:function (data) {
$("#img1").prop("src","/"+data)
}
})
})
}
/*
本地上传预览
*/
function bindAvatar2(){
$('#img2').change(function(){
var obj = $(this)[0].files[0];
var v = window.URL.createObjectURL(obj);
$('#img1').attr('src',v);
$('#img1').load(function(){
window.URL.revokeObjectURL(v);
});
})
}
function bindAvatar3(){
$('#img2').change(function(){
var obj = $(this)[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
$('#img1').attr('src',this.result);
};
reader.readAsDataURL(obj);
})
}
</script>
</body>
</html>