- 最后登录
- 2013-7-18
- 注册时间
- 2011-7-16
- 阅读权限
- 70
- 积分
- 3247
 
- 纳金币
- 324742
- 精华
- 0
|
javascript 简单实现图片上传预览功能的代码，没有用到jQuery，各有各的特点吧，如果你的网站之前就用有jQuery话，为了方便起见，最好借助jQuery插件完成本功能。要么你就用现在这个纯JavaScript版本的，很实用的功能。
看一下演示效果：
<HTML>
<HEAD>
<TITLE>JS上传预览的图片</TITLE>
</HEAD>
<script>
function DrawImage(ImgD){
var preW = 300;
var preH = 400 ;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=***e;
if(image.width/image.height>= preW/preH){
if(image.width>preW){
ImgD.width=preW;
ImgD.height=(image.height*preW)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>preH){
ImgD.height=preH;
ImgD.width=(image.width*preH)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
function FileChange(Value){
flag=false;
document.getElementById("uploadimage").width=10;
document.getElementById("uploadimage").height=10;
document.getElementById("uploadimage").alt="";
document.getElementById("uploadimage").src=Value;
}
</script>
<BODY>
<input type="file" size="30" name="picaddress" onChange="javascript:FileChange(this.value);">
<br><IMG id=uploadimage height=0 width=0 src="" onload="javascript rawImage(this);" >
</BODY>
</HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/24805.html
|
|
发表于 2011-12-30 19:34:45
QQ好友和群
腾讯微博
腾讯朋友
微信
转播
淘帖
收藏
支持
反对