IE8 上传图片预览（兼容）

Love The Way You Lie 2022-05-29 12:22 285阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    <form action="">
    	<input type="file" multiple="true" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 
        <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> 
    </form>
    </body>
    </html>
    <script>
    	 function getFileUrl(sourceId) { 
                var url; 
                if (navigator.userAgent.indexOf("MSIE")>=1) { // IE >6
                    url = document.getElementById(sourceId).value; 
                } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
                } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
                } 
                return url; 
            }
    
            /** 
            * 将本地图片 显示到浏览器上 
            */ 
            function preImg(sourceId, targetId) { 
                var url = getFileUrl(sourceId); 
                var imgPre = document.getElementById(targetId); 
                imgPre.src = url; 
                console.log(url);
            } 
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 47 阅读

相关 JavaScript上传图片前预览

纯JavaScript上传图片前预览 <table width="100%" border="0" cellspacing="0" cellpadding="0">

女爷i/ 2022年08月21日 05:59/ 0 赞/ 367 阅读

相关 js上传图片预览功能代码，兼容IE，FireFox，Chrome浏览器

原文：[js上传图片预览功能代码，兼容IE，FireFox，Chrome浏览器][js_IE_FireFox_Chrome] 源代码下载地址： [http://www.zui

超、凢脫俗/ 2022年07月14日 06:15/ 0 赞/ 206 阅读

相关 IE8 上传图片预览（兼容）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

Love The Way You Lie/ 2022年05月29日 12:22/ 0 赞/ 286 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 495 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 573 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 625 阅读

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 645 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 807 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 842 阅读