头像上传 - input(file)

最新推荐文章于 2023-06-07 15:40:24 发布

疾风狼w

最新推荐文章于 2023-06-07 15:40:24 发布

阅读量1.1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44361336/article/details/104665897

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

头像上传 - input(file)

使用input中的file标签进行头像的上传，主要的步骤为：获取文件的路径 --> 判断是否为图片格式 -->转成可以在本地预览的格式 --> 将图片路径赋值给img中的src

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像上传 - input(file)</title>
    <style>
        div {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            /*成为一个圆*/
            border-radius: 100px;
            overflow: hidden;
            background: black;
        }
    </style>
    <script src="../../jquery-1.8.2.min.js"></script>
    <script>
        $(function () {

            $('#chooseImg').on('change',function(){
                // 获取文件路径
                var filePath = $(this).val();
                // 截取上传文件的格式为".***"，从而进判断是否为图片格式
                var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                // 检查是否是图片格式
                if( !fileFormat.match(/.png|.jpg|.jpeg|.gif/) ) {
                    alert('上传错误,文件格式必须为：png/jpg/jpeg/gif');
                    return;
                }
                //转成可以在本地预览的格式
                var src = window.URL.createObjectURL(this.files[0]);
                // 将图片路径赋值给img中的src
                $('#headPortrait').attr('src',src);
            });
        });
    </script>
</head>
<body>
<div><img src="" alt="" id="headPortrait" width="200px" ></div>
<input type="file" id="chooseImg"/>
</body>
</html>

结果

在这里插入图片描述

疾风狼w

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
头像上传 - input(file)

头像上传 - input(file)使用input中的file标签进行头像的上传，主要的步骤为获取文件的路径 --> 判断是否为图片格式 -->转成可以在本地预览的格式 --> 将图片路径赋值给img中的src...
复制链接

扫一扫