Django 注册
一. 本地图片上传预览
1. 上传文件框隐藏到图片上面，点击图片相当于点上传文件框
<div class="login">
<div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">
<img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">
<input style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">
{{ obj.avatar }}
</div>
</div>
2. Ajax 上传并预览
#获取到头像，通过原生Ajax传到后端，后端返回一个路径，重新给image 的src赋值路径
#问题: 用户上传完头像，但没有注册,会在硬盘里出现多余的头像
# 有些网站是先上传到临时目录,注册完再移动到新的目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
<style>
.login{
width: 600px;
margin: auto;
padding: 20px;
margin-top: 80px;
}
.f1{
position: absolute;height:80px;width: 80px;top:;left: ;opacity: ;
} </style>
</head>
<body>
<div class="login">
<div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">
<img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">
<input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">
{{ obj.avatar }}
</div>
</div> <script src="/static/jquery-3.2.1.js"></script> <script>
$(function () {
bindAvartar1();
}); function bindAvartar1() {
$("#imgSelect").change(function () {
//$(this)[0] #jquery变成DOM对象
//$(this)[0].files #获取上传当前文件的上传对象
//$(this)[0].files[0] #获取上传当前文件的上传对象的某个对象
var obj = $(this)[].files[];
console.log(obj); //ajax 发送后台获取头像路径
//img src 重新定义新的路径 var formdata = new FormData(); //创建一个对象
formdata.append("file",obj);
var xhr = new XMLHttpRequest();
xhr.open("POST","/register/");
xhr.send(formdata); xhr.onreadystatechange = function () {
if(xhr.readyState ==){
var file_path = xhr.responseText;
console.log(file_path);
$("#previewImg").attr("src","/" + file_path)
}
}; })
}
</script>
</body>
</html>
register.html
import os
def register(request):
if request.method == "GET":
return render(request,"register.html")
else:
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get("file")
print(file_obj)
file_path = os.path.join("static", file_obj.name)
with open(file_path, "wb") as f:
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)
views.py
3. 本地上传并预览两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
<style>
.login{
width: 600px;
margin: 0 auto;
padding: 20px;
margin-top: 80px;
}
.f1{
position: absolute;height:80px;width: 80px;top:0;left: 0;opacity: 0;
} </style>
</head>
<body>
<div class="login">
<div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">
<img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">
<input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">
{{ obj.avatar }}
</div>
</div> <script src="/static/jquery-3.2.1.js"></script> <script>
$(function () {
bindAvartar2();
}); function bindAvartar2() {
$("#imgSelect").change(function () {
var obj = $(this)[0].files[0];
console.log(obj); //将文件对象上传到浏览器
//IE10 以下不支持
var v = window.URL.createObjectURL(obj);
$("#previewImg").attr("src",v); //不会自动释放内存
//当加载完图片后,释放内存
document.getElementById("previewImg").onload= function () {
window.URL.revokeObjectURL(v);
};
})
} function bindAvartar3() {
$("#imgSelect").change(function () {
var obj = $(this)[0].files[0];
console.log(obj); var reader = new FileReader();
reader.onload = function (e) {
$("#previewImg").attr("src",this.result);
};
reader.readAsDataURL(obj)
})
} </script>
</body>
</html>
4.以后用法
#先用本地预览，如果不支持，使用第三种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
<style>
.login{
width: 600px;
margin: 0 auto;
padding: 20px;
margin-top: 80px;
}
.f1{
position: absolute;height:80px;width: 80px;top:0;left: 0;opacity: 0;
} </style>
</head>
<body>
<div class="login">
<div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">
<img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">
<input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file"> </div>
</div> <script src="/static/jquery-3.2.1.js"></script> <script>
$(function(){
bindAvatar();
}); function bindAvatar(){
if(window.URL.createObjectURL){
bindAvatar2();
}else if(window.FileReader){
bindAvatar3()
}else{
bindAvatar1();
}
} function bindAvatar1() {
$("#imgSelect").change(function () {
//$(this)[0] #jquery变成DOM对象
//$(this)[0].files #获取上传当前文件的上传对象
//$(this)[0].files[0] #获取上传当前文件的上传对象的某个对象
var obj = $(this)[0].files[0];
console.log(obj); //ajax 发送后台获取头像路径
//img src 重新定义新的路径 var formdata = new FormData(); //创建一个对象
formdata.append("file",obj);
var xhr = new XMLHttpRequest();
xhr.open("POST","/register/");
xhr.send(formdata); xhr.onreadystatechange = function () {
if(xhr.readyState ==4){
var file_path = xhr.responseText;
{# console.log(file_path);#}
$("#previewImg").attr("src","/" + file_path)
}
};
})
} function bindAvatar2() {
$("#imgSelect").change(function () {
var obj = $(this)[0].files[0];
console.log(obj); //将文件对象上传到浏览器
//IE10 以下不支持 //不会自动释放内存
//当加载完图片后,释放内存 document.getElementById("previewImg").onload= function () {
window.URL.revokeObjectURL(v);
}; var v = window.URL.createObjectURL(obj);
$("#previewImg").attr("src",v);
})
} function bindAvatar3() {
$("#imgSelect").change(function () {
var obj = $(this)[0].files[0];
console.log(obj); var reader = new FileReader();
reader.onload = function (e) {
$("#previewImg").attr("src",this.result);
};
reader.readAsDataURL(obj)
})
} </script>
</body>
</html>
Django 注册的更多相关文章
- python Django注册页面显示头像
python Django注册页面显示头像(views) def register(request): ''' 注册 :param request: :return: ''' if request.m ...
- Django注册页面配置设计
一.上次回顾 Django数据的增查改删 models 中有userInfo 三个字段 user password phonenumber,models.userInfo.objects.all(). ...
- django 注册、登录及第三方接口程序(4)：扩展邮箱注册，登录，微博登录
1.邮箱注册 这里需要扩展User,两种解决办法,1,注册时将email字段内容赋给username,这种瞒天过海型的,另一种就是扩展user,这里介绍django1.5的扩展方法. 1.settin ...
- [py][mx]django注册-邮件激活
人生,学习,就是一段旅途, 说是放弃,其实是自信心作祟. 因为不同时间段状态,譬如晚上和早上刚来状态不一样.做相同事情容器失去自信而放弃. 坚持可以打破这个魔咒 还有就是有些问题得分割, 不要让压死牛 ...
- 7月2日 Django注册页面的form组件
forms.py里注册页面的form组件 # Create your views here. class RegForm(forms.Form): username = forms.CharField ...
- django(注册→登录→主页）增强版
首先准备一张空白的数据表: urls展示: views主要的几个函数以及数据库链接代码:↓ 后端编写结束↑ ↓前端 前端界面:↓ 幸好成功了,接下来看看数据库有没有插入数据.... 这么 ...
- django注册在使用hashlib对密码加密时报Unicode-objects must be encoded before hashing
在使用sh1等hashlib方法进行加密时报:Unicode-objects must be encoded before hashing 解决办法:对要加密的字符串指定编码格式 解决之前: s1=s ...
- django 注册后台管理 在debug=true能行，在debug=false不能显示出管理标签
debug=true 下,如下图:
- 基于 Django2 实现邮箱注册登录功能
1. 开发环境 Python 3.6.5 Django 2.2 2. 项目功能 用户登录 邮箱注册 图形验证码 找回密码 修改密码 用户退出 3. 项目创建 首先创建项目: django-admin ...
随机推荐
- Eclipse在线安装spring-tool-suit插件
查看eclipse版本:Help–>About Eclipse;如图1所示. 访问http://spring.io/tools/sts/all,复制在线安装url地址,不要下载ZIP文件,复制链 ...
- 【BZOJ3243】【NOI2013】向量内积（矩阵，数论）
[BZOJ3243][NOI2013]向量内积(矩阵,数论) 题面 BZOJ 题解 这题好神仙. 首先\(60\)分直接是送的.加点随机之类的可以多得点分. 考虑正解. 我们先考虑一下暴力. 我们把\ ...
- 洛谷 P2530 [SHOI2001]化工厂装箱员 解题报告
P2530 [SHOI2001]化工厂装箱员 题目描述 118号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有3种不同的纯度,A:100%,B ...
- 解题：SCOI 2008 天平
题面 我们很容易想到差分约束,但是我们建出来图之后好像并不好下手,因为我们只能得到砝码间的大小关系,并不能容易地得到每个砝码的具体重量. 于是我们有了一种神奇的思路:既然得不到具体重量我们就不求具体重 ...
- 【bzoj2006】超级钢琴
Portal --> bzoj2006 Solution 一开始看错题了..没有看到编号连续然后愣了好久== 首先肯定是找最大的\(K\)个啦,然后具体怎么找的话..没有什么特别好的办法那就 ...
- Rabbitmq--topic
一.前言 前面讲到direct类型的Exchange路由规则是完全匹配binding key与routing key,但这种严格的匹配方式在很多情况下不能满足实际业务需求.topic类型的Exchan ...
- 题解 P3153 【[CQOI2009]跳舞】
P3153 [CQOI2009]跳舞 题目描述 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢 ...
- Drools规则引擎环境搭建
Drools 是一款基于Java 的开源规则引擎,所以在使用Drools 之前需要在开发机器上安装好JDK 环境,Drools5 要求的JDK 版本要在1.5 或以上. Drools5 提供了一个基于 ...
- ZOJ 3781 Paint the Grid Reloaded 连通块
LINK:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3781 题意:n*m只由OX组成的矩阵,可以选择某一连通块变成另一 ...
- 复制自身程序到windows目录和system32目录下
功能:复制自身到windows目录和system32目录下. 参考代码: #include <stdio.h> #include <windows.h> void CopySe ...