文件上传简介1—上传到指定的目录3

现在的位置: 首页 > 综合 > 正文

文件上传简介1—上传到指定的目录3

2014年09月26日 ⁄ 综合 ⁄ 共 2364字 ⁄ 字号小中大 ⁄ 评论关闭

本节摘要：前面介绍了文件上传到目录，本节是对uoload.html前面前台做了一定的修改，加了一些校验在前台。

修改后的upload.html文件如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
     <head>
         <title>文件上传</title>
         <meta name="Generator" content="EditPlus">
         <meta name="Author" content="">
         <meta name="Keywords" content="">
         <meta name="Description" content="">
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <script>
 //文件提交之前一个简单的js校验
 function upFile(){
  //获得File的值
  var a=this.uploadform.a.value;
  var b=this.uploadform.b.value;
  var c=this.uploadform.c.value;
  
  //三个文件表单同时为空的时候提示
  if(a==""&&b==""&&c=="")
  { 
    alert("请选择文件");
 return;
  }
  
 //验证完成后跳转到指定的servlet处理
 this.uploadform.action="upload";//不能有左斜杠/   用此种方式访问后跳转的url为：http://localhost:8080/UpDown/upload  OK
 //错误的方式---> this.uploadform.action="/upload"; 用此种方式访问后跳转的url为：http://localhost:8080/upload         NG
    
 this.uploadform.submit();
 }
 
 //得到文件的后缀名
 function expType(obj){
 var re=/(\\+)/g;
 var error=obj.replace(re,"#").split("#");
 var fileName=error[error.length-1]; //如test.txt
 var expData=fileName.split(".");
 var expType=expData[expData.length-1];//得到文件a的后缀名txt   
 return expType;
  }
  
 //动态校验上传文件的后缀名 
  function verify(id){
  var fileValue=document.getElementById(id).value;
  var expName=expType(fileValue);
  var errorType =new Array(".exe", ".com", ".cgi", ".asp");//这些后缀名的文件不能上传
  for(i in errorType)
    {
 if(errorType[i]==("."+expName)){
        alert(errorType[i]+"格式的文件不能上传");
 return;
      }
    }
  }
 </script>
 
     </head>
 
     <body>
         <strong>文件上传演示demo---上传到本机文件夹中(程序和上传目录在同一主机)</strong>
         <!-- 
         1.上传的内容有图片的时候，form中必须加入 ENCTYPE="multipart/form-data" 
         2.在<input>标签中必须有name属性(除了提交按钮submit)，否则运行时虽然不会报错，但是文件无法成功上传
 -->
         <form name="uploadform" method="POST"  action="upload"
             ENCTYPE="multipart/form-data">
             <table border="1" width="450" cellpadding="4" cellspacing="2"
                 bordercolor="#9BD7FF">
                 <tr>
                     <td width="100%" colspan="2">
                         文件1：
                         <input id="aFile" name="a" size="40" type="file"  onblur="verify(id)"><!-- onblur="" -->
                     </td>
                 </tr>
                 <tr>
                     <td width="100%" colspan="2">
                         文件2：
                         <input id="bFile" name="b" size="40" type="file" onblur="verify(id)">
                     </td>
                 </tr>
                 <tr>
                     <td width="100%" colspan="2">
                         文件3：
                         <input id="cFile" name="c" size="40" type="file" onblur="verify(id)">
                     </td>
                 </tr>
 
             </table>
 
             <table>
                 <tr>
                     <td align="center">
                     <!-- 
                         <input name="upload" type="submit" value="开始上传" />
 -->
                         <input name="upload" type="button" value="开始上传" onclick="upFile()" />
                     </td>
                 </tr>
             </table>
 
         </form>
     </body>
 </html>

效果截图：

图1: