tambc

  1 < title > 文件上传前台控制检测程序 v0.6 </ title >  
  2 < style >  
  3 body,td {} { font-size : 12px ; }  
  4 </ style >  
  5 < script  language =javascript >  
  6
  7 /**/ /* ---------------------------------------- 
  8        文件上传前台控制检测程序 v0.6 
  9
 10   远程图片检测功能 
 11   检测上传文件类型 
 12
 13 　检测图片文件格式是否正确 
 14 　检测图片文件大小 
 15 　检测图片文件宽度 
 16 　检测图片文件高度 
 17   图片预览 
 18
 19             UpDate:2005/09/03 
 20 ----------------------------------------- */  
 21
 22 var  ImgObj = new  Image();    // 建立一个图像对象 
 23
 24 var  AllImgExt = " .jpg|.jpeg|.gif|.bmp|.png| " // 全部图片格式类型 
 25 var  FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg // 全局变量 图片相关属性 
 26
 27 // 以下为限制变量 
 28 var  AllowExt = " .jpg|.gif|.doc|.txt| "   // 允许上传的文件类型  0为无限制 每个扩展名后边要加一个"|" 小写字母表示 
 29 // var AllowExt=0 
 30 var  AllowImgFileSize = 70 ;   // 允许上传图片文件的大小 0为无限制  单位：KB 
 31 var  AllowImgWidth = 500 ;    // 允许上传的图片的宽度  0为无限制　单位：px(像素) 
 32 var  AllowImgHeight = 500 ;    // 允许上传的图片的高度  0为无限制　单位：px(像素) 
 33
 34 HasChecked = false ; 
 35
 36 function  CheckProperty(obj)   // 检测图像属性 
 37 { 
 38   FileObj = obj; 
 39    if (ErrMsg != "" )    // 检测是否为正确的图像文件　返回出错信息并重置 
 40    { 
 41     ShowMsg(ErrMsg, false ); 
 42      return   false ;    // 返回 
 43   }  
 44
 45    if (ImgObj.readyState != " complete " )  // 如果图像是未加载完成进行循环检测 
 46    { 
 47     setTimeout( " CheckProperty(FileObj) " , 500 ); 
 48      return   false ; 
 49   }  
 50
 51   ImgFileSize = Math.round(ImgObj.fileSize / 1024 * 100 ) / 100 ; // 取得图片文件的大小 
 52   ImgWidth = ImgObj.width ;   // 取得图片的宽度 
 53   ImgHeight = ImgObj.height;   // 取得图片的高度 
 54   FileMsg = " \n图片大小: " + ImgWidth + " * " + ImgHeight + " px " ; 
 55   FileMsg = FileMsg + " \n图片文件大小: " + ImgFileSize + " Kb " ; 
 56   FileMsg = FileMsg + " \n图片文件扩展名: " + FileExt; 
 57
 58    if (AllowImgWidth != 0 && AllowImgWidth < ImgWidth) 
 59     ErrMsg = ErrMsg + " \n图片宽度超过限制。请上传宽度小于 " + AllowImgWidth + " px的文件，当前图片宽度为 " + ImgWidth + " px " ; 
 60
 61    if (AllowImgHeight != 0 && AllowImgHeight < ImgHeight) 
 62     ErrMsg = ErrMsg + " \n图片高度超过限制。请上传高度小于 " + AllowImgHeight + " px的文件，当前图片高度为 " + ImgHeight + " px " ; 
 63
 64    if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) 
 65     ErrMsg = ErrMsg + " \n图片文件大小超过限制。请上传小于 " + AllowImgFileSize + " KB的文件，当前文件大小为 " + ImgFileSize + " KB " ; 
 66
 67    if (ErrMsg != "" ) 
 68     ShowMsg(ErrMsg, false ); 
 69    else  
 70     ShowMsg(FileMsg, true ); 
 71 }  
 72
 73 ImgObj.onerror = function () {ErrMsg = ’\n图片格式不正确或者图片已损坏 ! ’}  
 74
 75 function  ShowMsg(msg,tf)  // 显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 
 76 { 
 77   msg = msg.replace( " \n " , " <li> " ); 
 78   msg = msg.replace( / \n / gi, " <li> " ); 
 79    if ( ! tf) 
 80    { 
 81     document.all.UploadButton.disabled = true ; 
 82     FileObj.outerHTML = FileObj.outerHTML; 
 83     MsgList.innerHTML = msg; 
 84     HasChecked = false ; 
 85   }  
 86    else  
 87    { 
 88     document.all.UploadButton.disabled = false ; 
 89      if (IsImg) 
 90       PreviewImg.innerHTML = " <img src=’ " + ImgObj.src + " ’ width=’60’ height=’60’> "  
 91      else  
 92       PreviewImg.innerHTML = " 非图片文件 " ; 
 93     MsgList.innerHTML = msg; 
 94     HasChecked = true ; 
 95   }  
 96 }  
 97
 98 function  CheckExt(obj) 
 99 { 
100   ErrMsg = "" ; 
101   FileMsg = "" ; 
102   FileObj = obj; 
103   IsImg = false ; 
104   HasChecked = false ; 
105   PreviewImg.innerHTML = " 预览区 " ; 
106    if (obj.value == "" ) return   false ; 
107   MsgList.innerHTML = " 文件信息处理中 " ; 
108   document.all.UploadButton.disabled = true ; 
109   FileExt = obj.value.substr(obj.value.lastIndexOf( " . " )).toLowerCase(); 
110    if (AllowExt != 0 && AllowExt.indexOf(FileExt + " | " ) ==- 1 )  // 判断文件类型是否允许上传 
111    { 
112     ErrMsg = " \n该文件类型不允许上传。请上传  " + AllowExt + "  类型的文件，当前文件类型为 " + FileExt; 
113     ShowMsg(ErrMsg, false ); 
114      return   false ; 
115   }  
116
117    if (AllImgExt.indexOf(FileExt + " | " ) !=- 1 )   // 如果图片文件，则进行图片信息处理 
118    { 
119     IsImg = true ; 
120     ImgObj.src = obj.value; 
121     CheckProperty(obj); 
122      return   false ; 
123   }  
124    else  
125    { 
126     FileMsg = " \n文件扩展名: " + FileExt; 
127     ShowMsg(FileMsg, true ); 
128   }  
129    
130 }  
131
132 function  SwitchUpType(tf) 
133 { 
134      if (tf) 
135      str = ’ < input type = " file "  name = " file1 "  onchange = " CheckExt(this) "  style = " width:180px; " > ’ 
136      else  
137      str = ’ < input type = " text "  name = " file1 "  onblur = " CheckExt(this) "  style = " width:180px; " > ’ 
138     document.all.file1.outerHTML = str; 
139     document.all.UploadButton.disabled = true ; 
140     MsgList.innerHTML = "" ; 
141 }  
142
143 </ script >  
144 < form  enctype ="multipart/form-data"  method ="POST"  onsubmit ="return HasChecked;" >  
145 < fieldset  style ="width: 372; height: 60;padding:2px;" >  
146 < legend >< font  color ="#FF0000" > 图片来源 </ font ></ legend >  
147 < input  type ="radio"  name ="radio1"  checked onclick ="SwitchUpType(true);" > 本地 < input  type ="radio"  name ="radio1"  onclick ="SwitchUpType(false);" > 远程： < input  type ="file"  name ="file1"  onchange ="CheckExt(this)"  style ="width:180px;" >   < input  type ="submit"  id ="UploadButton"  value ="开始上传"  disabled >< br >  
148 < div  style ="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" >  
149 < table  border ="0" >< tr >< td  width ="60"  id ="PreviewImg" > 预览区 </ td >< td  id ="MsgList"  valign ="top" ></ td ></ tr ></ table >  
150 </ div >  
151 </ fieldset >  
152 </ form >