在Div里面显示一个本地图片,兼容IE6、IE7

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>本地图片预览代码(支持 IE6、IE7)</title>
        <script type="text/javascript" language="javascript">...
<!--
function PreviewImg(imgFile)...{
    //原来的预览代码,不支持 IE7。
    var oldPreview = document.getElementById("oldPreview");
    oldPreview.innerHTML = "<img src="file://" + imgFile.value + "" width="80" height="60" />";
    
    //新的预览代码,支持 IE6、IE7。
    var newPreview = document.getElementById("newPreview");
    
    var imgDiv = document.createElement("div");
    document.body.appendChild(imgDiv);
    imgDiv.style.width = "118px";    imgDiv.style.height = "127px";
    imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";   
    imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.appendChild(imgDiv);
    
    var showPicUrl = document.getElementById("showPicUrl");
    showPicUrl.innerText=imgFile.value;
    newPreview.style.width = "80px";
    newPreview.style.height = "60px";
}
-->
</script>
    </head>

    <body>

        <p>
            说明:以下针对的是互联网情况,如果您在本地作测试,比如输入的地址是:http://127.0.0.1/...,则可以看到全部预览。
        </p>

        <hr />

        <p>
            如果您使用的是 IE6,则可以看到以下预览;如果您使用的是 IE7,则看不到以下预览。
        </p>
        <div id="oldPreview"></div>

        <hr />

        <p>
            不论您使用的是 IE6 还是 IE7,均可以看到以下预览。
        </p>
        <div id="newPreview"></div>
        <div id="showPicUrl"></div>

        <hr />

        <p>
            请选择一个图片进行预览:
            <input type="file" size="20" onchange="javascript:PreviewImg(this);" />
        </p>

    </body>

</html>

 

时间: 2024-10-28 15:29:05

在Div里面显示一个本地图片,兼容IE6、IE7的相关文章

js 上传图片预览效果(兼容IE6,IE7,IE8和Firefox)

图片上传预览,就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果,关 于这个效果我一直认为是无法做到的,今天用alphaimageloader滤镜的src属就是其中的主角 它将使用绝对或相对url地址指定背景图像.假如忽略此参数,滤镜将不会作用. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-tran

完美兼容ie6,ie7,ie8以及firefox的css透明滤镜

本例是一个兼容IE6/IE7/IE8和火狐浏览器的css实现半透明层效果,之前本人也遇到过这样的问题,就是把一个层设置半透明后,内的文字也跟着半透明了,一直没找到合适的解决办法,今天看到designcss.org有一篇文章解决了这个问题,但有一点,发现在filter前边多加一个星号,多加个星号是为了让IE6和IE7执行,火狐和IE8就不执行了,火狐本身来讲就不支持IE特有的滤镜功能,所以这里没必要再加星号.还有就是不支持 IE8浏览器,经过研究,查阅大量资料,终于找到解决办法了,下面分享出来.

下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)

本文将为大家详细介绍下下拉菜单select样式如何设置才能够兼容IE6/IE7/IE8/火狐等主流浏览器,具体的实现代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助     复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的.加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,怎么办呢? 第一种方法: 还好,微软提供了这样一个代码: <meta http-equiv="x-ua-compatible" content="ie=7" /> 把这段代码放到里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本

HTML5新标签不兼容(IE6/IE7/IE8)怎么办

今天在这里教给大家一个完美解决HTML5新标签不兼容(IE6/IE7/IE8)的方法:        .html5-wrappers{display:none!important;}     您的浏览器禁用了脚本,请查看这里来启用脚本!或者继续访问.      HTML5新标签不兼容(IE6/IE7/IE8)的完美解决方法这是头部这是网站底部!!! 以上就是小编教给大家的:完美解决HTML5新标签不兼容(IE6/IE7/IE8)的方法!(附js文件:html5.rar) 以上是小编为您精心准备的

兼容ie6,ie7,ie8,firefox左下角浮动广告代码

提示:您可以先修改部分代码再运行 兼容ie6,ie7,ie8,firefox左下角浮动广告代码 子鼠测试. //这一行写了这个DIV是绝对定位,最好再加一下z-index:边框为1px的实线黑色边:距右边有0PX; ID=AD: 提示:您可以先修改部分代码再运行

avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]

avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

兼容IE6/IE7/IE8/FireFox的CSS hack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>区别IE6.IE