django头像上传预览功能

页面格式

创新互联建站是专业的和林格尔网站建设公司，和林格尔接单;提供成都做网站、网站设计、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行和林格尔网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

注册页面

这里可以看到有头像按钮，

头像需求

• 有默认的头像
• 点击头像就可以上传图片
• 上传图片后可以预览

生成默认的头像

上传默认图片到指定文件夹，然后把img标签的src指定到这里就可以，

点击头像上传图片

默认添加了<input type="file">后会在图片下面显示上传文件夹的选项，这个和我们当初想的不一样，我们可以通过把input标签和img标签重叠到一起，然后让input标签隐藏起来，这样出来的效果就是点击图片就可以点到input文件这个属性了

f1 属性为： .f1{
position: absolute;width: 80px;height: 80px;top: 0;left: 0;opacity: 0
}

鼠标放到图像上面会显示让上传文件

上传图像后预览

实现这个功能可以有三种方式：

• 直接把文件存到后台硬盘上，然后在从硬盘上读取出来，使用到的是ajax，formData，可以参考博客https://blog.51cto.com/sgk2011/2085605
• 下2种方式通过浏览器的方式，这个对浏览器有要求

    
    
    
    




    

        

            
            
        
        

        

            用户名
            

                {#      #}
                {{ obj.username }}
            
        
        

            密码
            

                {#      #}
                {{ obj.password1 }}
            
        
        

            确认密码
            

                {#      #}
                {{ obj.password2 }}
            
        
        

            验证码
            

                
            
            

                
            
        
        

            

                

                    
                         Remember me
                    
                
            
        
        

            

                
            
        
    

如果想要兼容的话，就对上面的方法做一个判断

        function bindAvatar(){
            if(window.URL.createObjectURL){
                bindAvatar2();
            }else if(window.FileReader){
                bindAvatar3()
            }else{
                bindAvatar1();
            }
        }

网页名称：django头像上传预览功能
标题链接：http://shouzuofang.com/article/jhjdop.html