关于上传图片并显示的问题，ie6和ie7不兼容这段代码

yzhxhwt 2009-07-09 03:28:12

很简单的一段js
function Preview(imgSrc)
{
document.getElementById("MyPreview").src = imgSrc;
}

选择照片：
<asp:FileUpload ID="FileUpload1" runat="server" onchange="Preview(this.value);" Width="270" />
<asp:Image ID="MyPreview" runat="server" />

这段代码在ie6下显示正常，就是选择图片，那个MyPreview把图片显示出来，但在ie7下不行，ie7就显示不出来
求助了！

...全文

757 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

fq1798 2011-05-23

打赏
举报

答案已经很清楚了啊，例子都有了，谢啦

limii 2010-04-27

打赏
举报

up...

yzhxhwt 2009-07-10

打赏
举报

信任站点可能没问题，我的ie安全机制已经很低了，可能你们没注意到，那个img或者div都是html的，我的image是asp.net的控件

alpha_423 2009-07-10

打赏
举报

还有一种不安全的做法就是添加信任站点，假设你的ip是192.168.0.1，把这个ip添加到信任站点里去，然后你在访问http://192.168.0.1/XXXX的页面时，添加图片，ie7下预览就都没问题的，但这是一个不安全的做法

yzhxhwt 2009-07-10

打赏
举报

谢谢各位，除了这种方法还有别的办法吗？

蝶恋花雨 2009-07-10

打赏
举报

IE7因为安全机制不能预览了。可以用下面方法
把上传图片路径先赋给一个隐藏域然后有个预览图片按钮。

function ShowPhoto() {
document.getElementById("iShowPhoto").src = "";
document.getElementById("iShowPhoto").src = document.getElementById("<%=HFurl.ClientID %>").value;
}
然后给按钮事件onlick="ShowPhoto()"

yzhxhwt 2009-07-10

打赏
举报

[Quote=引用 8 楼 natineprince 的回复:]
HTML code
<script>
function getValueIE8(id){
var ip = document.getElementById(id);
ip.select();
return document.selection.createRange().text;
}
function Preview()
{
var imgSrc = getValueIE8('FileUpload1');
document.getElementById("MyPreview").src = imgSrc;
}
</script>

<input type="file" ID="FileUpload1" runat="server" oncha…
[/Quote]

先感谢下你，貌似我这边ie6，7，8一个都不通过，呵呵

alpha_423 2009-07-09

打赏
举报

代码没问题的，只是ie7加强了安全机制，虽然看不出来，但是不影响上传的，在后台还是能到图片的文件流，如果你非要在ie7下看图片预览的话，可以用下面的代码
newPreview是个div
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = 图片路径;

natineprince 2009-07-09

打赏
举报

<script>

function getValueIE8(id){

            var ip = document.getElementById(id);

            ip.select();

            return document.selection.createRange().text;

            }

    function Preview() 

    { 

var imgSrc = getValueIE8('FileUpload1');

        document.getElementById("MyPreview").src = imgSrc; 

    } 

</script>



<input type="file" ID="FileUpload1" runat="server" onchange="Preview(this.value);" Width="270" /> 

<img ID="MyPreview" runat="server" />

IE6,7,8都通过呢...

yzhxhwt 2009-07-09

打赏
举报

引号我已经加了，不是引号的问题，呵呵，没用，你试试

cloudgamer 2009-07-09

打赏
举报

<!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>无标题文档</title>

</head>

<body>

<input type="file" id="t" onchange="getValue()" /> 

<div id="t2" style="visibility:hidden;"></div>

<img id="t1"/>

<script type="text/javascript"> 

var isIE = (document.all) ? true : false;

var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);

var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);

var isMozilla = /mozilla/.test( navigator.userAgent ) && !/(compatible|webkit)/.test( navigator.userAgent )

var isOpera = /Opera/.test( navigator.userAgent )

var t1=document.getElementById("t1")

var t2=document.getElementById("t2")

if(isIE7 || isIE8){

	t1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"

	t2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"

}

function getValue(){ 

    

	var t=document.getElementById("t");

	var value=t.value

	

	if(isIE7 || isIE8){

		t.select();

		var value=document.selection.createRange().text;

		document.selection.empty();

	}else if(isMozilla){

		value = t.files[0].getAsDataURL();

	}

	

	alert(value)

	

	

	

	if(isIE7 || isIE8){

		t1.style.visibility="hidden"

		t2.style.visibility=""

		

		t1.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=value;

		

		t2.style.width=t1.offsetWidth

		t2.style.height=t1.offsetHeight

	

		t2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=value;

	}else{

		t1.src=value

	}

}

</script>

</body>

</html>

natineprince 2009-07-09

打赏
举报

  function getValueIE8(id){

            var ip = document.getElementById(id);

            ip.select();

            return document.selection.createRange().text;

            }

    function Preview() 

    { 

var imgSrc = getValueIE8('FileUpload1');

        document.getElementById("MyPreview").src = imgSrc; 

    }

漏了引号...

yzhxhwt 2009-07-09

打赏
举报

不行啊，不显示，你测试了显示？？

natineprince 2009-07-09

打赏
举报

           function getValueIE8(id){

            var ip = document.getElementById(id);

            ip.select();

            return document.selection.createRange().text;

            }

    function Preview() 

    { 

var imgSrc = getValueIE8(FileUpload1);

        document.getElementById("MyPreview").src = imgSrc; 

    }

不求甚解的话.IE7上面的应该够了.

yzhxhwt 2009-07-09

打赏
举报

晕，眼睛都看花了，就我那个方法，可以改进吗？我那就一句就可以实现了，楼上的实在太多了，不过还是很感谢你
我来是寻求解决我那个方法的办法，网上也有很多代码，一搜多的跟牛毛一样，本意不在此。谢谢

natineprince 2009-07-09

打赏
举报

IE7开始不能获取PATH了.参考下面的.

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">

            <html>

            <head>

            <title>File Input</title>

            <meta http-equiv="content-type" content="text/html; charset=utf-8">

            <style>

            body{font-size:13px;}

            .box{border:1px solid #eee;background:#ffe;padding:10px 30px;margin:10px;}

            dt{font-weight:bold;}

            dt,img,textarea{margin:8px 0;}

            em{color:#f00; font-style:normal;}

            span{color:#999;}

            .ft{color:#999;font-size:11px;text-align:right}

            </style>

            </head>

            <body>

            <h2>在不同浏览器中获取File Input的value</h2>

            <div class="box">

            <input type="file" name="foo" id="foo" size="60" />

            <input type="button" value="Show Value" onclick="alert(document.getElementById('foo').value)" />

            <input type="button" value="Show Value in FF3" onclick="alert(getValueFF('foo'))" />

            <input type="button" value="Show Value in IE8" onclick="alert(getValueIE8('foo'))" />

            </div>

            <div class="box">

            <dl>

            <dt>Firefox 2.x、IE6、IE7</dt>

            <dd>在本地及远端都可以取得完整地址（包括路径及文件名）</dd>

            </dl>

            <dl>

            <dt>Firefox 3.0</dt>

            <dd>在本地及远端都<em>不能</em>取得完整地址，只能获得文件名</dd>

            </dl>

            <dl>

            <dt>IE8、IE7[IE8模拟]</dt>

            <dd>在本地可以取得完整地址（包括路径及文件名），在远端<em>不能</em>取得完整地址，只能获得文件名</dd>

            </dl>

            <span>* 本地：localhost</span>

            </div>

            <div class="box">

            <h3>如何在Firefox3下取得完整路径</h3>

            <p>

            第一步：打开"about:config"页面，查找"signed.applets.codebase_principal_support"属性，将其值设置为true。

            </p>

            <p>

            第二步：在javascript中采用以下代码进行获取：<br />

            <textarea style="width:800px;height:300px;">

            function getValueFF(id){

            var ip = document.getElementById(id);

            if (ip.files) {

            //ffx3 - try to have access to full path

            try {

            netscape.security.PrivilegeManager.enablePrivilege( 'UniversalFileRead' )

            }

            catch (err) {

            //need to set signed.applets.codebase_principal_support to true

            }

            };

            return ip.value;

            }

            </textarea>

            </p>

            <p>

            经过以上步骤，在Firefox3下获取file input的value时，会弹出一个Internet Security的对话框，点击"Allow"将可以获取完整value。<br />

            <span>资料：<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=143220" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=143220</a></span>

            </p>

            </div>

            <div class="box">

            <h3>如何在IE8下取得完整路径</h3>

            <p>方法一：使用selection.createRange <br />

            <textarea style="width:800px;height:150px;">

            function getValueIE8(id){

            var ip = document.getElementById(id);

            ip.select();

            return document.selection.createRange().text;

            }

            </textarea>

            </p>

            <p>方法二：引用：<a href="https://bugzilla.mozilla.org/attachment.cgi?id=328849" target="_blank">https://bugzilla.mozilla.org/attachment.cgi?id=328849</a></p>

            </div>

            <script language="JavaScript">

            function getValueFF(id){

            var ip = document.getElementById(id);

            if (ip.files) {

            //ffx3 - try to have access to full path

            try {

            netscape.security.PrivilegeManager.enablePrivilege( 'UniversalFileRead' )

            }

            catch (err) {

            //need to set signed.applets.codebase_principal_support to true

            }

            };

            return ip.value;

            }

            function getValueIE8(id){

            var ip = document.getElementById(id);

            ip.select();

            return document.selection.createRange().text;

            }

            </script>

            </body>

            </html>