上传图片并预览-原生js代码

最新推荐文章于 2024-07-18 20:54:54 发布

吃瓜群众欢乐多

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量2.8k

点赞数 2

分类专栏： ES6/ES5 文章标签： js 图片

本文链接：https://blog.csdn.net/sinat_36146776/article/details/77101732

版权

ES6/ES5 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

谷歌浏览器兼容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #showImg img{
                width:500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <input type="file" class="upfile" name="img" id="input"/>
        <div id="showImg"></div>
    </body>
    <script type="text/javascript">
        var oImg=document.createElement('img');
        var showImg = document.getElementById("showImg");
        showImg.appendChild(oImg);
        document.getElementById('input').onchange =function(){
            var url = window.URL.createObjectURL(this.files.item(0))
            oImg.src = url;
        }
    </script>
</html>

兼容版本的代码

oImg.src = getFileUrl(this);
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
            url = sourceId.value;
        } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
            url = window.URL.createObjectURL(sourceId.files.item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
            url = window.URL.createObjectURL(sourceId.files.item(0));
        }
        return url;
    };

吃瓜群众欢乐多

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片并预览-原生js代码

谷歌浏览器兼容<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> #showImg img{ width:50...
复制链接

扫一扫

专栏目录