js实现上传头像（看了你就懂，相信我）

电玩女神 2021-09-19 13:38 260阅读 0赞

**效果图：**

![在这里插入图片描述][20190523092218668.png]  
**html:**

**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();
            // 根据文件类型选择阅读方式
            switch (file.type){
            case 'image/jpg':
            case 'image/png':
            case 'image/jpeg':
            case 'image/gif':
            reader.readAsDataURL(file);
            break;
            }
            // 当文件阅读结束后执行的方法
            reader.addEventListener('load',function () {
            // 如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
            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;
            }
            });
            }

[20190523092218668.png]: /images/20210812/f9f248dc2ba740559fd99d8b0703b1dc.png