js 兼容IE

fankys 2011-06-04 12:13:20



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>图片预览效果</title>



</head>

<body>

<script>

var version = parseFloat(navigator.appVersion.split("MSIE")[1]);   

function yulan(file,id) {

  if(file.value.indexOf(".jpg")<0 && file.value.indexOf(".jpeg")<0 &&   file.value.indexOf(".gif")<0 && file.value.indexOf(".png")<0 && file.value.indexOf(".JPG")<0 && file.value.indexOf(".JPEG")<0 &&   file.value.indexOf(".GIF")<0 && file.value.indexOf(".PNG")<0){

  alert('您选择的不是图片文件');

  return false;

 }

 if(navigator.userAgent.indexOf("Mozilla/5.")>-1){

     document.getElementById(id).innerHTML = "<img width='150'  height='150' src='"+file.files[0].getAsDataURL()+"'>";

  CheckFileSize(file.files[0].getAsDataURL(),id);//if(CheckFileSize(file.files[0].getAsDataURL())>328)document.getElementById(id).getElementsByTagName('img')[0].style.width = "328px";



 }else{

   file.select();

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

   document.getElementById(id).innerHTML = "<img width='150'  height='150' src='"+img+"'>";

   if(CheckFileSize(file.value)>328)document.getElementById(id).getElementsByTagName('img')[0].style.width = "328px";

 }

}

</script>

<div id="tu"></div>



<form name="form1" method="POST" enctype="multipart/form-data">

<input type="file" name="UpFile" size="46" onChange="yulan(this,'tu')">



<div id="preview"></div>

</form>





</body>

</html>

上面的JS代码不支持IE浏览器，请js高手指点在IE下的兼容

...全文

115 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

toury 2011-06-05

打赏
举报

你求助什么呢？要完整的、现成的代码，还是解决问题的思路？

我给你的链接你试了吗？

fankys 2011-06-05

打赏
举报

继续求助

toury 2011-06-05

打赏
举报

帮你写了一个，没仔细测试。只在IE6\7\8、FF3.6测过



<!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=utf-8" />

<script>

function $(id){return document.getElementById(id)}

function uploadPreviw(f) {	

  picPath = getPath(f);

  $('box').innerHTML='';

	var img=new Image;

	img.style.display="none"; 	

 	img.onload=function(){ 

        /*

        1、如果你不需要预览大图(原图尺寸)功能，把this.onmouseover、this.onmouseout、this.ondblclick行注释掉

        2、预览尺寸为150x150;你可以根据需要改改：w=w>150?150:w;  h=h>150?150:h;

        */

        var w=this.width,h=this.height, _this=this;

        this.onmouseover=function(w,h){return function(){_this.style.width=w+'px';_this.style.height=h+'px';}}(w,h)

  	w=w>150?150:w;  h=h>150?150:h;

  	this.onmouseout=function(){_this.style.width=w+'px';_this.style.height=h+'px';}

  	this.ondblclick=function(){_this.style.width=w+'px';_this.style.height=h+'px';}

  	this.style.width=w+'px';  this.style.height=h+'px';

  	this.style.display="block";

  	$('box').appendChild(img);

  	this.onload=null;

  }

	img.src=picPath 	  

}



function getPath(obj){

  if(obj){    

    if (window.navigator.userAgent.indexOf("MSIE")>=1){//ie

      obj.select();      return document.selection.createRange().text;

    }

    else if(window.navigator.userAgent.indexOf("Firefox")>=1){

      if(obj.files){        return obj.files[0].getAsDataURL();      }

      return obj.value;

    }

    return obj.value;

  }

}

</script>

</head>

<body>

<input type="file" name="pic" id="pic" onchange='uploadPreviw(this)' />

<div id='box'></div>

</body>

</html>