注册页面的头像上传 register.html<!DOCTYPE html>
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>Title</title>
5 </head>
6 <body>
7 <div style="margin-left: 30px; margin-top: 30px">
8 <form action="">
9 {% csrf_token %}
10 <h3>用户注册</h3>
11 <p>用户名：<input type="text" name="user"></p>
12 <p>密 码 ：<input type="password" name="pwd"></p>
13 <p>再输入：<input type="password" name="pwd"></p>
14 <p>昵 称 ：<input type="text" name="nickname"></p>
15 <p>邮 箱 ：<input type="text" name="email"></p>
16 <input id="avatar" type="file" value="上传头像"> {# 实际应用中要将该input标签隐藏，display:none; #}
17 <p><input type="submit" value="注册" style="margin-left:50px;width:100px;"></p>
18 </form>
19 <div style="position: absolute; top: 85px; left: 300px;">
20 <input id="avatarSelect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
21 <img id="avatarPreview" src="/static/img/default.png" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
22 </div>
23 </div>
24 </body>
25
26 <script src="\static\jquery-3.3.1.min.js"></script>
27 <script>
28 $(function () {
29 bindAvatar();
30 });
31
32 function bindAvatar() {
33 if(window.URL.createObjectURL){
34 bindAvatar3();
35 }else if(window.FileReader){
36 bindAvatar2();
37 }else {
38 bindAvatar1();
39 }
40 }
41
42 /*Ajax上传至后台并返回图片的url*/
43 function bindAvatar1() {
44 $("#avatarSelect").change(function () {
45 var csrf = $("input[name=‘csrfmiddlewaretoken‘]").val();
46 var formData=new FormData();
47 formData.append("csrfmiddlewaretoken",csrf);
48 formData.append(‘avatar‘, $("#avatarSelect")[0].files[0]);
49 console.log(formData);
50 /*获取上传的图片对象*/
51 $.ajax({
52 url: ‘/avatar_load/‘,
53 type: ‘POST‘,
54 data: formData,
55 contentType: false,
56 processData: false,
57 success: function (args) {
58 console.log(‘年后哦‘)
59 console.log(args); /*服务器端的图片地址*/
60 $("#avatarPreview").attr(‘src‘,‘/‘+args); /*预览图片*/
61 $("#avatar").val(‘/‘+args); /*将服务端的图片url赋值给form表单的隐藏input标签*/
62 }
63 })
64 })
65 }
66 /*window.FileReader本地预览*/
67 function bindAvatar2() {
68 console.log(2);
69 $("#avatarSelect").change(function () {
70 var obj=$("#avatarSelect")[0].files[0];
71 var fr=new FileReader();
72 fr.readAsDataURL(obj);
73 fr.onload=function () {
74 $("#avatarPreview").attr(‘src‘,this.result);
75 console.log(this.result);
76 $("#avatar").val(this.result);
77 };
78 fr.readAsDataURL(obj);
79 })
80 }
81 /*window.URL.createObjectURL本地预览*/
82 function bindAvatar3() {
83 console.log(3);
84 $("#avatarSelect").change(function () {
85 var obj=$("#avatarSelect")[0].files[0];
86 var wuc=window.URL.createObjectURL(obj);
87 $("#avatarPreview").attr(‘src‘,wuc);
88 $("#avatar").val(wuc);
89 {# $("#avatarPreview").load(function () {#} /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
90 {# window.URL.revokeObjectURL(wuc);#}
91 {# })#}
92 })
93 }
94
95 </script>
96 </html>
视图函数
1 def register(request): 2 """注册 3 :param request 4 :return""" 5 if request.method == ‘GET‘: 6 return render(request,‘register.html‘) 7 8 def avatar_reg(request): 9 """ 10 :param request: (avatar头像对象) 11 :return: 12 """ 13 file_obj = request.FILES.get(‘avatar‘) 14 file_path = os.path.join(‘static/img‘,file_obj.name) 15 with open(file_path,‘wb‘) as f: 16 for chunk in file_obj.chunks(): 17 f.write(chunk) 18 print file_path 19 return HttpResponse(file_path)
路由系统 url.py
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app_boke import views 4 urlpatterns = [ 5 url(r‘^admin/‘, admin.site.urls), 6 url(r‘^all/(?P<url_id>\d+)/‘, views.test),#正则p是大写，页面的参数和type_id组成键值对穿个函数中的变量kwargs 7 url(r‘^$‘, views.test), #默认输入域名或ip到达首页,上下兼容,必须加斜杠或者终止符不然可能跟其他的url有路径冲突(这种匹配追号写到地下，匹配是从上往下) 8 url(r‘^login/‘, views.login), 9 url(r‘^ajax_login/‘, views.ajax_login), 10 url(r‘^login1/‘, views.login1), 11 url(r‘^index/‘, views.index), 12 url(r‘^check_code/‘, views.check_code), 13 url(r‘^register/‘, views.register), 14 url(r‘^avatar_load/‘, views.avatar_reg), 15 ]
Form表单组件出现的错误信息
{
__all__:[错误1,错误2]， 整体共有的错误
user:[错误1，错误2]，
password:[错误1,错误2],
}
#获取整体。共有错误信息
-后台 对象的errors属性
print(obj.errors[‘__all__‘])或者 #参考源码
print(obj.errors[‘NON_FIELD_ERRORS‘])
-模板（前端）
{{obj,non_filed_errors}} 特殊
原文地址：https://www.cnblogs.com/qlshao/p/8497289.html
时间： 2024-07-31 06:08:44