2.6.5 优化头像上传功能
时间:2020-11-30
本文章向大家介绍2.6.5 优化头像上传功能,主要包括2.6.5 优化头像上传功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
目录
1.复制js文件
cp ~/DjangoPracticeProject/layer-v3.0.1/layer/layer.js static/js/
cp -a ~/DjangoPracticeProject/layer-v3.0.1/layer/skin static/js/
2.编辑 templates/account/myself.html
导入js文件,增加弹窗功能
{% extends "base.html" %} {% load staticfiles%} {% block title %}myinforation{% endblock %} {% block content %} <script> function upload_image_layer(){ layer.open({ title:"上传头像", area:['900px' , '600px'], type:2, content:"{% url 'account:my_image' %}", }); } </script> <div class ="row text-center vertical-middle-sm"> <h1>My Information</h1> <div class ="row"> <div class="col-md-6"> <div class="row"> <div class ="col-md-4 text-right"><span>username:</span></div> <div class="col-md-8 text-left">{{ user.username}}</div> </div> <div class ="row"> <div class="col-md-4 text-right"><span>email:</span></div> <div class="col-md-8 text-left">{{ user.email}}</div> </div> <div class ="row"> <div class="col-md-4 text-right"><span>birth:</span></div> <div class ="col-md-8 text-left">{{ userprofile.birth}}</div> </div> <div class ="row"> <div class="col-md-4 text-right"><span>phone:</span></div> <div class="col-md-8 text-left">{{ userprofile.phone}}</div> </div> <div class="row"> <div class="col-md-4 text-right"><span>school:</span></div> <div class="col-md-8 text-left">{{userinfo.school}}</div> </div> <div class ="row"> <div class ="col-md-4 text-right"><span>company:</span></div> <div class="col-md-8 text-left">{{userinfo.company}}</div> </div> <div class ="row"> <div class ="col-md-4 text-right"><span>profession:</span></div> <div class ="col-md-8 text-left">{{userinfo.profession}}</div> </div> <div class ="row"> <div class="col-md-4 text-right"><span>address:</span></div> <div class ="col-md-8 text-left">{{ userinfo.address}}</div> </div> <div class ="row"> <div class ="col-md-4 text-right"><span>about:</span></div> <div class ="col-md-8 text-left">{{ userinfo.aboutme}}</div> </div> <a href="{% url 'account:edit_my_information' %}"><button class="btn btn-primary btn-lg">edit my information</button></a> </div> <div class ="col-md-6"> <div style="margin-right:100px"> {% if userinfo.photo %} <img src="{{userinfo.photo | striptags }}" class="img-circle" id="my_photo" name="user_face"> {% else %} <img name ="user_face" src="{% static 'images/pig.jpg' %}" class="img-circle" width="270px" id="my_photo"> {% endif %} </div> <div style="margin-right: 100px"><button class="btn btn-primary btn-lg" id="upload_image" onclick="upload_image_layer()">upload my photo</button></div> </div> </div> </div> <script type="text/javascript" src='{% static "js/jquery-3.4.1.min.js" %}'></script> <script type="text/javascript" src='{% static "js/layer.js" %}'></script> {% endblock %}
原文地址:https://www.cnblogs.com/yaoyuanchun/p/14061416.html
- python基础知识——内置数据结构(字典)
- mysql、mongodb、python(dataframe).聚合函数的形式,以及报错解决方案
- JavaScript计算水仙花数【可自定义范围】
- JSP简单入门(1)
- mongodb取出json,利用python转成dataframe(dict-to-dataframe)
- JSP简单入门(2)
- JSP简单入门(3)
- 物化视图相关的性能改进 (r7笔记第58天)
- Maven 核心原理解析(1)
- LeetCode——Two Sum
- TensorFlow全新的数据读取方式:Dataset API入门教程
- 不经意发现的dba_objects和dba_tables中的细节(r7笔记第56天)
- LeetCode——Longest Substring Without Repeating Characters
- Python time模块详解(时间戳↔元组形式↔格式化形式三者转化)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 代码审计day5
- 使用innobackupex对数据库进行部分备份(指定表或数据库)
- 使用Django获取Linux性能数据并存放在redis中
- MySQL组复制(MGR)全解析 Part 5 MGR单主模式部署指南
- php学习day4
- 使用Python爬取动态网页-腾讯动漫(Selenium)
- MySQL 5.7 常用命令
- MySQL复制全解析 Part 5 MySQL GTID的格式和存储
- Mycat分库分表全解析 Part 1 数据库切分概述
- RoarCTF2019-EasyJava
- ACTF2020新生赛-BackupFile
- DB2 Linux平台安装 Part 5 数据库常见参数配置
- GXYCTF2019-PingPingPing
- 利用cloudflareWorkers制作Google镜像站
- MySQL information_schema详解 COLLATIONS