js實現(xiàn)上傳頭像（看了你就懂，相信我）

效果圖：


html:

    <div class="tx ovf">
        <div class="tit">頭像</div>
        <div class="ovf tx-img"><img src="" alt="">
            <div class="upload-b"><span>修改頭像</span><input type="file" class="upload1"></div>
        </div>
    </div>

 

css:

    .ovf{overflow: hidden;}
    .tit { float: left; width: 50px; margin-top: 39px; font-size: 0.9vw; color: #999999; }
    .tx{ margin-top:44px; }
    .tx img{ width: 90px; height: 90px; border-radius:50%; margin-right:30px;border: 1px solid #fca89d; }
    .tx span{ border: solid 1px #fca89d; color: #fca89d; font-size: 16px; padding: 10px; cursor: pointer; }
    .upload1 { position: absolute; right:0; }
    .tx img{ float: left; }
    .tx input{ width: 86%; opacity: 0; }
    .upload-b { float: left; margin-top:36px; position: relative; }

 

js：

$(".upload1").change(function(){
        var file=this.files[0];
        readFile(file);
        });
    function readFile(file) {
        // 新建閱讀器
        var reader = new FileReader();
        // 根據(jù)文件類型選擇閱讀方式
        switch (file.type){
        case 'image/jpg':
        case 'image/png':
        case 'image/jpeg':
        case 'image/gif':
        reader.readAsDataURL(file);
        break;
        }
        // 當文件閱讀結(jié)束后執(zhí)行的方法
        reader.addEventListener('load',function () {
        // 如果說讓讀取的文件顯示的話 還是需要通過文件的類型創(chuàng)建不同的標簽
        switch (file.type){
        case 'image/jpg':
        case 'image/png':
        case 'image/jpeg':
        case 'image/gif':
        console.log(reader.result);
        $(".tx-img img").attr("src",reader.result);
        break;
        }
        });
        }
 





作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路