js上传文件控制

来源：互联网发布：java 参数有什么用编辑：程序博客网时间：2024/05/19 09:39

UpLoadFileCheck=function()
{
    this.AllowExt=".jpg .jpeg .gif .bmp";//允许上传的文件类型 0为无限制每个扩展名后边要加一个"." 小写字母表示
    this.AllowImgFileSize=200;//允许上传文件的大小 0为无限制单位：KB
    this.AllowImgWidth=0;//允许上传的图片的宽度 0为无限制　单位：px(像素)
    this.AllowImgHeight=0;//允许上传的图片的高度 0为无限制　单位：px(像素)
    this.ImgObj=new Image();
    this.ImgFileSize=0;
    this.ImgWidth=0;
    this.ImgHeight=0;
    this.FileExt="";
    this.ErrMsg="";
    this.IsImg=false;//全局变量
}

UpLoadFileCheck.prototype.CheckExt=function(obj)
{
   this.ErrMsg="";
   this.ImgObj.src=obj.value;
   //this.HasChecked=false;
   if(obj.value=="")
   {
    this.ErrMsg="/n请选择一个文件";
   }
   else
   {
    this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
    if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)//判断文件类型是否允许上传
    {
     this.ErrMsg="/n该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt;
     PreviewImg.innerHTML="<font color='red'>非图片文件</font>";
    }
   }
   if(this.ErrMsg!="")
   {
    this.ShowMsg(this.ErrMsg,false);
     return false;
   }
   else
    return this.CheckProperty(obj);
}

UpLoadFileCheck.prototype.CheckProperty=function(obj)
{
   if(this.ImgObj.readyState!="complete")//
    {
     sleep(1000);//一秒使用图能完全加载
    }
   if(this.IsImg==true)
   {
    this.ImgWidth=this.ImgObj.width;//取得图片的宽度
    this.ImgHeight=this.ImgObj.height;//取得图片的高度
    if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)
    this.ErrMsg=this.ErrMsg+"/n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件，当前图片宽度为"+this.ImgWidth+"px";

    if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
    this.ErrMsg=this.ErrMsg+"/n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件，当前图片高度为"+this.ImgHeight+"px";
    PreviewImg.innerHTML="<img src='"+this.ImgObj.src+"' width='100' height='100'>"
   }else{
    PreviewImg.innerHTML="<font color='red'>非图片文件</font>";
   }

   this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
   if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)
    this.ErrMsg=this.ErrMsg+"/n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件，当前文件大小为"+this.ImgFileSize+"KB";

   if(this.ErrMsg!="")
   {
    this.ShowMsg(this.ErrMsg,false);
    return false;
   }
   else
    return true;
}

UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)//显示提示信息 tf=false 显示错误信息 msg-信息内容
{
   // msg=msg.replace("/n","<li>");
// msg=msg.replace(//n/gi,"<li>");
   alert(msg);
}
function   sleep(num)
   {
    var   tempDate=new Date();
    var   tempStr="";
    var   theXmlHttp   =   new   ActiveXObject(   "Microsoft.XMLHTTP"   );
    while((new   Date()-tempDate)<num   )
    {
    tempStr+="/n"+(new   Date()-tempDate);
    try{
    theXmlHttp   .open(   "get",   "about:blank?JK="+Math.random(),   false   );
    theXmlHttp   .send();
    }
    catch(e){;}
    }
   //containerDiv.innerText=tempStr;
   return;
   }

//加载
function load(obj)
{
   var d=new UpLoadFileCheck();
   d.IsImg=true;
   d.AllowImgFileSize=100;
   return d.CheckExt(obj);
}

//上传
function upload(){
var d=new UpLoadFileCheck();
    d.IsImg=true;
    d.AllowImgFileSize=100;
    if(d.CheckExt(document.getElementById("attachmentFiles"))){
    document.getElementById("datainfoForm").submit();
    alert("上传成功!")
    }else{
    return ;
    }
}

</script>
</head>
<body >

  <center>
   <div style="width: 450px;" class="x-box-blue">
    <div class="x-box-tl">
     <div class="x-box-tr">
      <div class="x-box-tc"></div>
     </div>
    </div>
    <div class="x-box-ml">
     <div class="x-box-mr">
      <div class="x-box-mc">
       <h4 style="margin-bottom: 5px;">
        上传用户图片
       </h4>
       <br>
       <div id="form-ct">
        <div id="topic-grid"
         style="border: 1px solid #99bbe8; overflow: hidden; width: 421px; position: relative; left: 0; top: 0;">
         <br>

    <form name="datainfoForm" method="post" action="<c:url value="/bizcommon/attachment!loadUserPic.action"/>" enctype="multipart/form-data">

    <table width="90%" border="0" cellspacing="1" cellpadding="1" bgcolor="#c3daf9" align="center">
     <tr>
     <td align="left">
     <input type="file" name="attachmentFiles" style="width:75%;border-width:0" onchange="load(this)"/>
     <input type="button" value="上传" onclick="upload()">
     </td>
     </tr>
     <tr>
      <td colspan="2"> 
      </td>
     </tr>
     <input type="hidden" name="module" value="<c:out value="datamanage"/>">
     <input type="hidden" name="relativeid" value="<c:out value="${userid}"/>">
     <input type="hidden" name="delete" value="<c:out value="1"/>">
     <input type="hidden" name="classname" value="<c:out value="pic"/>">
     <input type="hidden" name=filetypes value="<c:out value="jpg,jpeg,gif,bmp"/>">

    </table>
    <span id="PreviewImg"></span>
    </form>


   </div>
    <br>
        </div>
    </div></div></div>
    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</center>

</body>
</html>