最简方法实现JavaScript图片上传预览功能

2020-01-27 13:45:12

字体：大中小

来源：转载

供稿：网友

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=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>

上一篇：Js让网页浏览者适时选择字体颜色

下一篇：可关闭固定底（顶）部的工具条菜单