最簡方法實現JavaScript圖片上傳預覽功能

2024-09-05 12:17:58

字體：大中小

來源：轉載

供稿：網友

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讓網頁瀏覽者適時選擇字體顏色