上传图片前预览控制上传格式

foohsinglong

浏览: 222655 次
性别:
来自: 魔都

最近访客更多访客>>

asyuanbo

rocky514

olewaLdeisi

sdywcd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script>
var maxH = 768;
var maxW = 1024;
function DrawImage(ImgD){
   var preW = 300;
   var preH = 400 ;
   var image=new Image();
   image.src=ImgD.src;
   if(image.width > maxW || image.height > maxH){
 alert("图片尺寸过大，请选择" + maxW + "*" + maxH + "的图片！");
 return;
   }
   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 checkFormat(filePath) {
 var   i = filePath.lastIndexOf('.');
 var   len = filePath.length;
 var   str = filePath.substring(len,i+1);
 var   extName = "JPG,GIF,PNG,JPEG,BMP";
 if(extName.indexOf(str.toUpperCase()) < 0)  {     
  alert("请选择正确的图片文件!");   
  return false;   
 } 
 return true;         
}   

function FileChange(Value){
 if(checkFormat(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>

分享到：