django 上传头像并预览 3选1

注册页面的头像上传 register.html
<!DOCTYPE html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <div style="margin-left: 30px; margin-top: 30px">
         <form action="">
             {% csrf_token %}
         <h3>用户注册</h3>
         <p>用户名：<input type="text" name="user"></p>
         <p>密 码 ：<input type="password" name="pwd"></p>
         <p>再输入：<input type="password" name="pwd"></p>
         <p>昵 称 ：<input type="text" name="nickname"></p>
         <p>邮 箱 ：<input type="text" name="email"></p>
             <input id="avatar" type="file" value="上传头像"> {# 实际应用中要将该input标签隐藏，display:none; #}
             <p><input type="submit" value="注册" style="margin-left:50px;width:100px;"></p>
         </form>
         <div style="position: absolute; top: 85px; left: 300px;">
         <input id="avatarSelect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
         <img id="avatarPreview" src="/static/img/default.png" title="点击更换图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
             </div>
     </div>
 </body>
 
 <script src="\static\jquery-3.3.1.min.js"></script>
 <script>
     $(function () {
             bindAvatar();
     });
 
     function bindAvatar() {
             if(window.URL.createObjectURL){
                 bindAvatar3();
             }else if(window.FileReader){
                 bindAvatar2();
             }else {
                 bindAvatar1();
             }
     }
 
     /*Ajax上传至后台并返回图片的url*/
     function bindAvatar1() {
         $("#avatarSelect").change(function () {
         var csrf = $("input[name='csrfmiddlewaretoken']").val();
         var formData=new FormData();
         formData.append("csrfmiddlewaretoken",csrf);
         formData.append('avatar', $("#avatarSelect")[0].files[0]);
         console.log(formData);
             /*获取上传的图片对象*/
         $.ajax({
             url: '/avatar_load/',
                     type: 'POST',
                     data: formData,
                     contentType: false,
                     processData: false,
                     success: function (args) {
                     console.log('年后哦')
                     console.log(args);              /*服务器端的图片地址*/
                     $("#avatarPreview").attr('src','/'+args);        /*预览图片*/
                     $("#avatar").val('/'+args);     /*将服务端的图片url赋值给form表单的隐藏input标签*/
                     }
             })
         })
     }
     /*window.FileReader本地预览*/
     function bindAvatar2() {
         console.log(2);
              $("#avatarSelect").change(function () {
                      var obj=$("#avatarSelect")[0].files[0];
                      var fr=new FileReader();
                      fr.readAsDataURL(obj);
                      fr.onload=function () {
                              $("#avatarPreview").attr('src',this.result);
                              console.log(this.result);
                              $("#avatar").val(this.result);
            };
            fr.readAsDataURL(obj);
        })
   }
   /*window.URL.createObjectURL本地预览*/
   function bindAvatar3() {
       console.log(3);
             $("#avatarSelect").change(function () {
                     var obj=$("#avatarSelect")[0].files[0];
                     var wuc=window.URL.createObjectURL(obj);
                      $("#avatarPreview").attr('src',wuc);
                      $("#avatar").val(wuc);
 {#                     $("#avatarPreview").load(function () {#}        /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
 {#                             window.URL.revokeObjectURL(wuc);#}
 {#           })#}
       })
   }
 
 </script>
 </html>

视图函数

 def register(request):
     """注册
     :param request
     :return"""
     if request.method == 'GET':
         return render(request,'register.html')
 
 def avatar_reg(request):
     """
     :param request: (avatar头像对象)
     :return:
     """
     file_obj = request.FILES.get('avatar')
     file_path = os.path.join('static/img',file_obj.name)
     with open(file_path,'wb') as f:
         for chunk in file_obj.chunks():
             f.write(chunk)
     print file_path
     return HttpResponse(file_path)

路由系统 url.py

 from django.conf.urls import url
 from django.contrib import admin
 from app_boke import views
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^all/(?P<url_id>\d+)/', views.test),#正则p是大写，页面的参数和type_id组成键值对穿个函数中的变量kwargs
     url(r'^$', views.test), #默认输入域名或ip到达首页,上下兼容,必须加斜杠或者终止符不然可能跟其他的url有路径冲突(这种匹配追号写到地下，匹配是从上往下)
     url(r'^login/', views.login),
     url(r'^ajax_login/', views.ajax_login),
     url(r'^login1/', views.login1),
     url(r'^index/', views.index),
     url(r'^check_code/', views.check_code),
     url(r'^register/', views.register),
     url(r'^avatar_load/', views.avatar_reg),
 ]

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}}  特殊

django 上传头像并预览 3选1的更多相关文章

[.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...
关于confluence上传文件附件预览查看时出现乱码的问题解决办法
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
java多图片上传--前端实现预览--图片压缩、图片缩放，区域裁剪，水印，旋转，保持比例。
java多图片上传--前端实现预览前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
confluence上传文件附件预览乱码问题（linux服务器安装字体操作）
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
图片上传前的预览（PHP）
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
DAY19-上传头像并预览
一个简单的注册页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

debian8 vga 文本模式下出现闪屏
这种问题是因为 grub 里面关于分辨率大小不对的问题. 在 debian 里面,在文件 /boot/grub/grub.cfg 里面可以添加 vga 参数配置. 如下: 在 kernel 启动参数 ...
DTLZ
DTLZ 开新坑,未完待续觉得有用的话,欢迎一起讨论相互学习~Follow Me Reference [1] Multiobjective Immune Algorithm with Nondomi ...
log4net记录多个级别文件
https://www.cnblogs.com/AprilBlank/p/12047757.html
phpspreadsheet 中文文档（三）计算引擎
2019年10月11日13:59:52 使用PhpSpreadsheet计算引擎执行公式计算由于PhpSpreadsheet表示内存中的电子表格,因此它还提供公式计算功能.单元格可以是值类型(包含 ...
Spring Boot启动时出现WARN：No MyBatis mapper was found in
今天发现spring-boot继承mybatis启动时老是出现WARN: org.mybatis.spring.mapper.ClassPathMapperScanner - No MyBatis m ...
2019年新加坡之行 Day 1
又到了公司每年一次的年度旅游,继前几年的香港.日本.韩国游后,今年公司选择了新加坡.由于之前曾在新加坡公司The Adventus Consultants工作过2年时间,所以对于这次重返新加坡,我还是 ...
【idea】全局搜索、替换只显示100条的问题
没有修改之前修改之后如果用的是idea默认的快捷键,按Ctrl+Shift+A,然后输入Registry 如果是eclipse的快捷键
Django框架之DRF APIView Serializer
一.APIView 我们在使用DjangoRestfulFramework的时候会将每个视图类继承APIView,取代原生Django的View类 APIView的流程分析: rest_framewo ...
DS AVL树详解
先说说二叉搜索树: 是有序的二叉树,根值>左节点值,右节点值>根值. 如果要查找某个值,二叉搜索树和二分查找一样,每进行一次值比较,就会减少一半的遍历区间. 但是,如果树插入的值一直递增/ ...
「UER#2」信息的交换
「UER#2」信息的交换吉利题.. 不难发现,置换中的每一个循环是独立的,每一个循环分别对应一个独立的联通块. 根据题目的性质,每一个联通块做的事情等价于其按照编号从小到大遍历的的dfs生成树做的事 ...

django 上传头像并预览 3选1

django 上传头像并预览 3选1的更多相关文章

随机推荐

热门专题