input上传图片+预览图片

husky花

于 2017-07-18 10:19:10 发布

阅读量537

点赞数

CC 4.0 BY-SA版权

分类专栏： js-上传图片

本文链接：https://blog.youkuaiyun.com/hflxia/article/details/75274855

js-上传图片专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML原生input元素实现图片预览的方法。通过监听文件选择事件，利用JavaScript的URL.createObjectURL方法实时展示用户所选图片的预览效果。

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

使用原声input上传图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>URL.createObjectURL()</title>
    </head>
    <body>
        <input type="file" accept="image/*"  id='chooseImg'/>
        <img src="" alt="" id='preview'/>
    </body>
    <script>
        var inp=document.getElementById("chooseImg")
        inp.onchange=function(){
            var file=this.files[0]
            console.log(file)
            imageUrl = URL.createObjectURL(file);
            image = document.getElementById("preview");
            image.src = imageUrl;
        }
    </script>
</html>