本地上传图片在线预览

最新推荐文章于 2025-02-19 16:26:56 发布

原创最新推荐文章于 2025-02-19 16:26:56 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

16 篇文章

订阅专栏

博客介绍了运用URL.createObjectURL()方法创建临时图片地址。同时提到若觉得选择文件的input框丑，可隐藏它，用其他元素代替，通过替换元素的点击事件触发input的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要就是运用URL.createObjectURL()方法创建临时的图片地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>头像：<input type="file" onChange="fileChange()" id="file"></div>
    <img src="" alt="">
    <script>
        function fileChange(){
            var file=document.querySelector('#file').files[0];
            document.querySelector('img').src=URL.createObjectURL(file)
        }
    </script>
</body>
</html>

有时候觉得选择文件的input框太丑，那么我们就隐藏用其他元素来代替，主要就是替换元素的点击事件触发input的点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>头像：<input type="file" onChange="fileChange()" id="file"> <span onclick="uploadImg()"></span> </div>
    <img src="" alt="" id="img">
    <script>
        function fileChange(){
            var file=document.querySelector('#file').files[0];
            document.querySelector('#img').src=URL.createObjectURL(file)
        }
        function uploadImg(){  
            document.querySelector('#file').click();//触发input的点击事件即可
        }
    </script>
    <style>
        div span{display: inline-block;width: 30px;height: 30px;background: #ccc;border-radius: 6px;cursor: pointer;}
        input{display: none}
    </style>
</body>
</html>