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

来源：互联网发布：程序员加薪压力大编辑：程序博客网时间：2024/04/30 01:29

谷歌浏览器兼容

<!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;    };

阅读全文

1 0