IE6 <img id="pic" width="50" length="50">
<input type='file' id='file' onchang='getp()'>
<script >
function getp(){
$('pic').src = $('file').value
}
</script>
Ie7,Ie6
function p(my){
/// alert(document.getElementById("pic").filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"))
document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = my.value;
}
<div id="pic" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:100px;height:100px;"></div>
<input type="file" name="file" onChange="p(this)" />
淘宝预览图片代码
<!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>
<title>中国站长天空-网页特效-图片特效-淘宝网生成预览图片效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
div#PreviewBox{
position:absolute;
padding-left:6px;
display: none;
Z-INDEX:2006;
}
div#PreviewBox span{
width:7px;
height:13px;
position:absolute;
left:0px;
top:9px;
background:url() 0 0 no-repeat;
}
div#PreviewBox div.Picture{
float:left;
border:1px #666 solid;
background:#FFF;
}
div#PreviewBox div.Picture div{
border:4px #e8e8e8 solid;
}
div#PreviewBox div.Picture div a img{
margin:19px;
border:1px #b6b6b6 solid;
display: block;
max-height: 250px;
max-width: 250px;
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript" type="text/javascript">
var maxWidth=250;
var maxHeight=250;
function getPosXY(a,offset) {
var p=offset?offset.slice(0):[0,0],tn;
while(a) {
tn=a.tagName.toUpperCase();
if(tn=='IMG') {
a=a.offsetParent;continue;
}
p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
if(tn=="BODY")
break;
a=a.offsetParent;
}
return p;
}
function checkComplete() {
if(checkComplete.__img&&checkComplete.__img.complete)
checkComplete.__onload();
}
checkComplete.__onload=function() {
clearInterval(checkComplete.__timeId);
var w=checkComplete.__img.width;
var h=checkComplete.__img.height;
if(w>=h&&w>maxWidth) {
previewImage.style.width=maxWidth+'px';
}
else if(h>=w&&h>maxHeight) {
previewImage.style.height=maxHeight+'px';
}
else {
previewImage.style.width=previewImage.style.height='';
}
previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null;
}
function showPreview(e) {
hidePreview (e);
previewFrom=e.target||e.srcElement;
previewImage.src=loadingImg;
previewImage.style.width=previewImage.style.height='';
previewTimeoutId=setTimeout('_showPreview()',500);
checkComplete.__img=null;
}
function hidePreview(e) {
if(e) {
var toElement=e.relatedTarget||e.toElement;
while(toElement) {
if(toElement.id=='PreviewBox')
return;
toElement=toElement.parentNode;
}
}
try {
clearInterval(checkComplete.__timeId);
checkComplete.__img=null;
previewImage.src=null;
}
catch(e) {}
clearTimeout(previewTimeoutId);
previewBox.style.display='none';
}
function _showPreview() {
checkComplete.__img=new Image();
if(previewFrom.tagName.toUpperCase()=='A')
previewFrom=previewFrom.getElementsByTagName('img')[0];
var largeSrc=previewFrom.getAttribute("large-src");
var picLink=previewFrom.getAttribute("pic-link");
if(!largeSrc)
return;
else {
checkComplete.__img.src=largeSrc;
checkComplete.href=picLink;
checkComplete.__timeId=setInterval("checkComplete()",20);
var pos=getPosXY(previewFrom,[106,26]);
previewBox.style.left=pos[0]+'px';
previewBox.style.top=pos[1]+'px';
previewBox.style.display='block';
}
}
</script>
<div id="PreviewBox" onmouseout="hidePreview(event);">
<div class="Picture" onmouseout="hidePreview(event);">
<span></span>
<div>
<a id="previewUrl" href="javascript:void(0)" target="_blank"><img oncontextmenu="return(false)" id="PreviewImage" src="about:blank" border="0" onmouseout="hidePreview(event);" /></a>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var previewBox = document.getElementById('PreviewBox');
var previewImage = document.getElementById('PreviewImage');
var previewUrl = document.getElementById('previewUrl');
var previewFrom = null;
var previewTimeoutId = null;
var loadingImg = 'http://www.zzsky.cn/effect/images/200812132355_loading.gif';
</script>
<a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
<img src="http://www.zzsky.cn/effect/images/200812132355_a.gif" alt="" large-src="http://www.zzsky.cn/effect/images/200812132355_b.gif" pic-link="http://www.zzsky.cn" border="0" width="100"/></a>
</body>
</html>
ttp://taoke.alimama.com/spreader/adShopList.htm?shopKeeperID=11006855
http://s.click.taobao.com/a/qXMXdfxg3Rk=-11452884
分享到:
相关推荐
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
在选择本地图片文件并确定后,生成预览。同时,会对选择的图片格式进行过滤,如果不是图片格式的文件,会显示提示信息。
在上传图片时,经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
主要为大家详细介绍了js本地图片预览实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
上传图片的project 博文链接:https://alisdame.iteye.com/blog/2163940
本文实例为大家分享了js本地图片预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我...
vue 2.5.2 版本 vue组件 实现点击预览大图功能,点击下载图片功能(不兼容IE,适用于PC端) 内部代码可实现点击图片旋转效果,在本处无用,故注释掉,如有需要可打开调整.
本地图片预览</title> <style type="text/css"> #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader...
本地预览图片,js写的,可以添加、删除图片,本地预览图片,,
js实现本地,客户端,图片预览,清空背景功能,图片可调比例缩小,支持IE8浏览器
js本地预览图片转base64+php存储成图片
js 手机端 图片放大预览
插件描述:js上传图片本地预览。 参考实例:http://www.jq22.com/jquery-info6180
实现图片本地先预览,支持IE6\7\8和FF3.5
主要介绍了纯JS实现本地图片预览的方法,基于javascript插件实现本地图片预览功能,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
cupload本地图片上传预览插件
在 IE6 中,可以很方便地利用 img 的 src 属性,实现本地图片预览,然而在 IE7 中,这种办法却行不通。需要用 AlphaImageLoader