点击头像更换头像

最新推荐文章于 2022-07-15 16:02:34 发布

Adore_an

最新推荐文章于 2022-07-15 16:02:34 发布

阅读量3k

点赞数 1

分类专栏： Java web

本文链接：https://blog.csdn.net/qq_31580493/article/details/90609811

版权

这篇博客详细介绍了如何点击头像来更换个人头像的步骤，包括选择图片、裁剪和保存等过程，适合需要更新个人形象的用户参考。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引进jquery，script才有效果-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <script>
        $(function(){
            $("#userHead").click(function(){
                $("#btn_file").click();//隐藏了input:file样式，点击头像就可以选择文件
                $("#btn_file").on("change",function(){
                    var objUrl = getObjectUrl(this.files[0]);//获取图片的路径，该路径不是图片在本地的路径
                    if(objUrl){
                        $("userHead").attr("src",objUrl);//将图片路径存入src,显示图片
                    }
                });

            });


        });

        function getObjectUrl(file){
            var url = null;
            if(window.createObjectURL != undef