頁(yè)面格式

創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的和林格爾網(wǎng)站建設(shè)公司，和林格爾接單;提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行和林格爾網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

注冊(cè)頁(yè)面

這里可以看到有頭像按鈕，

頭像需求

• 有默認(rèn)的頭像
• 點(diǎn)擊頭像就可以上傳圖片
• 上傳圖片后可以預(yù)覽

生成默認(rèn)的頭像

上傳默認(rèn)圖片到指定文件夾，然后把img標(biāo)簽的src指定到這里就可以，

點(diǎn)擊頭像上傳圖片

默認(rèn)添加了<input type="file">后會(huì)在圖片下面顯示上傳文件夾的選項(xiàng)，這個(gè)和我們當(dāng)初想的不一樣，我們可以通過(guò)把input標(biāo)簽和img標(biāo)簽重疊到一起，然后讓input標(biāo)簽隱藏起來(lái)，這樣出來(lái)的效果就是點(diǎn)擊圖片就可以點(diǎn)到input文件這個(gè)屬性了

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

鼠標(biāo)放到圖像上面會(huì)顯示讓上傳文件

上傳圖像后預(yù)覽

實(shí)現(xiàn)這個(gè)功能可以有三種方式：

• 直接把文件存到后臺(tái)硬盤(pán)上，然后在從硬盤(pán)上讀取出來(lái)，使用到的是ajax，formData，可以參考博客https://blog.51cto.com/sgk2011/2085605
• 下2種方式通過(guò)瀏覽器的方式，這個(gè)對(duì)瀏覽器有要求

    
    
    
    




    

        

            
            
        
        

        

            用戶名
            

                {#      #}
                {{ obj.username }}
            
        
        

            密碼
            

                {#      #}
                {{ obj.password1 }}
            
        
        

            確認(rèn)密碼
            

                {#      #}
                {{ obj.password2 }}
            
        
        

            驗(yàn)證碼
            

                
            
            

                
            
        
        

            

                

                    
                         Remember me
                    
                
            
        
        

            

                
            
        
    

如果想要兼容的話，就對(duì)上面的方法做一個(gè)判斷

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