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 ...
随机推荐
- php+memcached缓存技术实例
一.memcached 简介 在很多场合,我们都会听到 memcached 这个名字,但很多同学只是听过,并没有用过或实际了解过,只知道它是一个很不错的东东.这里简单介绍一下,memcached 是高 ...
- linux(二) 基本使用命令
一.常用命令归纳分类 课外网站 http://man.linuxde.net/ http://www.jb51.net/linux/ http ...
- 温习classList api
有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...
- [POI2008]MAF-Mafia
Description 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人也不同. ...
- Problem D. Country Meow 2018ICPC南京
n个点求出最小圆覆盖所有点 退火算法不会,不过这题可以用三分套三分写 x轴y轴z轴各三分 #include <cstdio> #include <cstring> #inclu ...
- Nginx修改access.log日志时间格式
一.修改原因 因为要获取nginx访问信息,作为开发的数据使用,但是nginx的access.log文件中的默认的时间格式是这样的: [02/Nov/2017:20:48:25 +0800] 而要求的 ...
- 二型错误和功效（Type II Errors and Test Power）
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...
- xcode禁用ARC(Automatic Reference Counting)
Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入的最大的变革和最激动人心的变化.ARC是新的LLVM 3.0编译器的一项特性, ...
- extjs6需要引入文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vijos 1243 生产产品 DP + 单调队列优化
LINK 题意:有1个产品,m个步骤编号为1~m.步骤要在n个机器人的手中生产完成.其中,第i个步骤在第j个机器人手中的生产时间给定为$T[i][j]$,切换机器人消耗cost.步骤必须按顺序,同一个 ...