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

马克社区

发布于 2022-07-18 20:17:27

4510

发布于 2022-07-18 20:17:27

文章被收录于专栏：高端IT高端IT

效果图：

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();
        // 根据文件类型选择阅读方式
        switch (file.type){
        case 'image/jpg':
        case 'image/png':
        case 'image/jpeg':
        case 'image/gif':
        reader.readAsDataURL(file);

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120074416

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

javascript