JS upload avatar (you can understand it after reading it, trust me)

design sketch ：

html:

<div class="tx ovf">
        <div class="tit"> Head portrait </div>
        <div class="ovf tx-img"><img src="" alt="">
            <div class="upload-b"><span> Modify the head image </span><input type="file" class="upload1"></div>
        </div>
    </div>

Copy

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; }

Copy

js：

$(".upload1").change(function(){
        var file=this.files[0];
        readFile(file);
        });
    function readFile(file) {
        //  New reader 
        var reader = new FileReader();
        //  Choose the reading method according to the document type 
        switch (file.type){
        case 'image/jpg':
        case 'image/png':
        case 'image/jpeg':
        case 'image/gif':
        reader.readAsDataURL(file);

Copy

For more information, please refer to the original , Reproduced from ：https://blog.csdn.net/weixin_44519496/article/details/120074416