上传图片产生预览(4种方法)

一、

二、

<form name="form" id="form" method="post" action="#">
<input type="file" name="file" id="file" onchange="preview()" />
<img id="pic" src="" alt="图片在此显示" width="120"/>
</form>
<script type="text/javascript">
function preview(){
var x = document.getElementById("file");
var y = document.getElementById("pic");
if(!x || !x.value || !y) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(
patn.test(x.value)){ y.src = "" + x.value;
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>

三、

<HTML>
<HEAD>
<TITLE>用JS做上传图片预览功能</TITLE>
<script>
function Wa_SetImgAutoSize(img)
{
//var img=document.all.img1;//获取图片
var MaxWidth=200;//设置图片宽度界限
var MaxHeight=100;//设置图片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比
var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比
alert("test"+img.offsetHeight+img.fileSize);
if(img.offsetHeight>1) alert(img.offsetHeight);
if(img.readyState!="complete"){
   return false;//确保图片完全加载
}

if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}

function CheckImg(img)
{
   var message="";
   var MaxWidth=1;//设置图片宽度界限
   var MaxHeight=1;//设置图片高度界限

   if(img.readyState!="complete"){
   return false;//确保图片完全加载
   }
   if(img.offsetHeight>MaxHeight) message+="\r高度超额："+img.offsetHeight;
   if(img.offsetWidth>MaxWidth) message+="\r宽度超额："+img.offsetWidth;
   if(message!="") alert(message);
}
</script>
</HEAD>
<BODY>
<img src="http://www.baidu.com/img/sslm1_logo.gif" name="img1" width="80" border=0 id="img1" >
<br>
<input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>
另外附上ＰＨＰ的一个取得图片文件信息的函数getimagesize()的一个使用实例:

<?
$arr=getimagesize("images/album_01.gif");
echo $arr[3];
$strarr=explode("\"",$arr[3]);
echo $strarr[1];
?>

4、
兼容ie火狐的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传预览兼容ie6 ,ie7 ,火狐3.0</title>
<style type="text/css">
.img
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">
/*显示图片*/
function showpic(file,img){

var dFile = document.getElementById(file.id);
var dImg = document.getElementById(img);
var dInfo = document.getElementById('img');

if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){
   alert('图片类型必须是: .jpg, .gif, .bmp or .png !');
   return;
}
if(dFile.files){
   dImg.src = dFile.files[0].getAsDataURL();

}
else{
/*这步骤是用来在ie6,ie7中显示图片的*/
var from=img.indexOf('g')+1;
var to=img.length;
var pic='pic'+img.substring(from,to);
var newPreview = document.getElementById(pic);
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dFile.value;
    dImg.style.display='none';
     newPreview.style.width = "105px";
     newPreview.style.height = "105px";

}
}
</script>
</head>
<body>

<p>不论您使用的是 IE6 还是 IE7,还是火狐、均可以看到以下预览。</p>
<p>虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流</p>
<p>qq:253930407 email:ruanjingwang@yahoo.com.cn</p>
<div id="pic1" class="img"></div>
<img id="img1" src="" width="105" height="104" />

<hr />

<p>请选择一个图片进行预览：<input type="file" id="upload3" name="upload" onchange="showpic(this,'img1');"/></p>

</body>
</html>

http://hi.baidu.com/hanxiaoll/item/c5068cb87795f3ef4ec7fd2f

posted @ 2012-09-25 13:56 luoxiake 阅读(208) 评论(0) 收藏举报

刷新页面返回顶部

聚盆宝

你是高手。

上传图片产生预览(4种方法)

公告