美文网首页
JavaScript实现上传图片预览(无后端)

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

作者: jeferwang | 来源:发表于2017-05-14 14:26 被阅读0次
    <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>
    

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

    相关文章

      网友评论

          本文标题:JavaScript实现上传图片预览(无后端)

          本文链接:https://www.haomeiwen.com/subject/ztsqxxtx.html