 |
热门文章 |
|
|
|
|
| 最简方法实现JavaScript图片上传预览功能 |
| 来源：源码爱好者 更新时间：2010/8/23 14:50:34 阅读次数： 我要投稿 |
|
<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=true;
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:DrawImage(this);" >
</BODY>
</HTML> |
| 特效说明： |
JavaScript上传图片前预览功能的代码，没有用到jQuery，各有各的特点吧，如果你的网站之前就用有jQuery话，为了方便起见，最好借助jQuery插件完成本功能。要么你就用现在这个纯JavaScript版本的，很实用的功能。 |
|
| 上一篇文章： DIV中实现input垂直居中下一篇文章： 输入指定字符后页面匹配字符串变红高亮 |
|
|
|
注册 登录
