JavaScript实现上传图片预览(无后端)

<body>
    <input type="file" id="file_input" onchange="show_image()" />
    <img src="" alt="" id="show_img" width="100px" height="100px" style="display: none;" />
</body>
<script>
    function show_image() {
        //首先获取到文件输入框和img元素
        file_input = document.getElementById("file_input");
        show_img = document.getElementById("show_img");
        //创建URL对象
        show_img.src = window.URL.createObjectURL(file_input.files[0]);
        //显示图片
        show_img.style.display = 'block';
    }
</script>

原创作品,允许转载,转载时请务必以超链接形式标明原始出处、作者信息和本声明,否则后果自负。
如果你觉得这篇文章对你有帮助或启发,可直接留言和我沟通

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,856评论 25 709
  • CSS实现 JavaScript实现 原创作品,允许转载,转载时请务必以超链接形式标明原始出处、作者信息和本声明,...
    jeferwang阅读 1,417评论 0 0
  • 数据格式: 非递归算法 递归算法 最终结果 原创作品,允许转载,转载时请务必以超链接形式标明原始出处、作者信息和本...
    jeferwang阅读 1,898评论 0 3
  • 那些远方也许终究成了家乡,家乡慢慢也成了那些远方。 “这是曾经是个小的门市部,后来改了变成了烧饼店。” “我要个大...
    王小憨阅读 4,026评论 0 50
  • 生活并不是短跑,而是一场马拉松,投资亦是如此。 1、盘面一览 周一大盘开盘后,先是在钢铁和银行的带动下,发...
    阿凯古阅读 2,844评论 3 3