`
huangjiateng
  • 浏览: 36826 次
社区版块
存档分类
最新评论

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

 
阅读更多
以下是最后的研究结果，同时兼容IE6,IE7,IE8和Firefox。

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview()
{
  document.getElementById('preview').style.display = 'none';
  // 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
  document.getElementById('box').innerHTML
    = "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
这里用来解决图片加载延时造成的预览失败.
简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
*/
  if ( image.width == 0 || image.height == 0 ) {
    setTimeout(buttonShow, 1000);
  } else {
    document.getElementById('preview').style.display = 'block';
  }
}
function loadImage(ele) {
  picPath   = getPath(ele);
  image     = new Image();
  image.src = picPath;
  setTimeout(buttonShow, 1000);
}
function getPath(obj)
{
  if(obj)
  {
    //ie
    if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
      obj.select();
      // IE下取得图片的本地路径
      return document.selection.createRange().text;
    }
    //firefox
    else if(window.navigator.userAgent.indexOf("Firefox")>=1)
    {
      if(obj.files)
      {
        // Firefox下取得的是图片的数据
        return obj.files.item(0).getAsDataURL();
      }
      return obj.value;
    }
    return obj.value;
  }
}
</script>
</head>
<body>
<input type="file" name="pic" id="pic" onchange='loadImage(this)' />
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
<div id='box'></div>
</body>
</html>
代码二：



<html>
<head>
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 ">
<title> html－www.51windows.Net </title>
</head>
<body>
<script>
var   img=null;
function   s()
{
if(img)img.removeNode(true);
img=document.createElement( "img ");
img.style.position= "absolute ";
img.style.visibility= "hidden ";
img.attachEvent( "onreadystatechange ",orsc);
img.attachEvent( "onerror ",oe);
document.body.insertAdjacentElement( "beforeend ",img);
img.src=inp.value;
}
function   oe()
{
alert( "cant   load   img ");
}
function   orsc()
{
if(img.readyState!= "complete ")return   false;
alert( "高: "+img.offsetHeight+ "\n宽: "+img.offsetWidth);
}
</script>
<input   type= "file "   Name= "file "   id= "inp "   value= "默认值 "> <br> <input   onclick= "s() "   type= "button "   value= "点我一下给出要上传图片的大小及长、宽 "   name= "button ">

</body>
</html>

代码三：


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片上传——www.aa25.cn</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片——www.aa25.cn" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>
代码四：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS上传前预览图片 www.codefans.net</title>
<script type="text/javascript" language="javascript">
<!--
function PreviewImg(imgFile){ 
    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>    
      <form>
        <p>兼容IE6、IE7</p>
        <div id="newPreview"></div>
        <div id="showPicUrl"></div>
        <hr />
        <p>
            选择图片：<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
        </p>
       <input type="submit" value="submit">
     </form>
    </body>
</html>
 
  • ss.rar (1.4 KB)
  • 下载次数: 2
分享到：
| DATE
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics