资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

django头像上传预览功能

页面格式

django头像上传预览功能

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

注册页面

django头像上传预览功能
这里可以看到有头像按钮,

头像需求

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

上传默认图片到指定文件夹,然后把img标签的src指定到这里就可以,
django头像上传预览功能

点击头像上传图片

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

        
头像

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

鼠标放到图像上面会显示让上传文件
django头像上传预览功能

上传图像后预览

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

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



    
    登陆页
    
    






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

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

网站名称:django头像上传预览功能
文章转载:http://cdkjz.cn/article/jhjdop.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220