注册页面的头像上传 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的更多相关文章
	

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

	


随机推荐
	

    
									
  1. apache环境.htaccess设置301跳转及常用.htaccess技巧整理
			
    apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...
    
			
    2. 
						
  2. Jav面向对象
			
    /* * 面向对象: * 1.关注现实存在的事物的各方面信息,从对象的角度出发,根据事物的特征进行程序设计 * 2.对象:用来描述客观事物的一个实体 * 3.类:具有相同属性和方法的一组对象的集合 * ...
    
			
    3. 
						
  3. 阶段一-01.万丈高楼，地基首要-第2章 单体架构设计与准备工作-2-27 为何不使用@EnableTransactionManagement就能使用事务？
			
    使用了注解使用事务.但是没有开启注解的启用 启动类里面使用注解 @EnableTransactionManager开启事物的管理. 为什么我们没有开启这个注解,还需要在响应的Service里面使用事务 ...
    
			
    4. 
						
  4. 在idea中打开maven项目pom.xml未识别
			
    在idea中打开maven项目pom.xml没有识别出来,导致idea不能自动下载依赖包, 解决办法是选中pom.xml文件,右键-" add as maven project"
    
			
    5. 
						
  5. Python绘制六种可视化图表详解，三维图最炫酷！你觉得呢？
			
    Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢? 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上 ...
    
			
    6. 
						
  6. Spring、SpringMVC、Spring Boot、Spring Cloud 概念、关系及区别
			
    注:此文章转载于其他大神 一.正面解读: Spring主要是基于IOC反转Beans管理Bean类,主要依存于SSH框架(Struts+Spring+Hibernate)这个MVC框架,所以定位很明确 ...
    
			
    7. 
						
  7. C# 发送Post请求（带参数）
			
    此处内容传输都是用UTF-8编码 1.不带参数发送Post请求 /// <summary> /// 指定Post地址使用Get 方式获取全部字符串 /// </summary> ...
    
			
    8. 
						
  8. Linux 就该这么学 CH03 管道符、重定向和环境变量
			
    0 概述 1 输入输出重定向 重定向技术有5种模式: 标准覆盖输出重定向 标准追加输出重定向 错误覆盖输出重定向 错误追加输出重定向 输入重定向 输入重定向是将文件导入到命令中. 输出重定向是将输入到 ...
    
			
    9. 
						
  9. ThinkPHP3（结构，路由，模板的调用，后台搭建，系统常量）
			
    ThinkPHP的结构如下: 在ThinkPHP\Library\Think文件夹中,几个重要的文件 1.App.class.php 框架核心类文件 2.Think.class.php 每次请求都要执 ...
    
			
    10. 
						
  10. java.lang.IllegalArgumentException，java.util.zip.ZipException 解决办法
			
    控制台错误信息: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apac ...
    
			
    11.