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

来源：互联网发布：淘宝安全证书下载编辑：程序博客网时间：2024/05/17 12:03

本节摘要：前面介绍了文件上传到目录，本节是对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:

截图2：

截图3：

对于我来说，今天主要是知道了以下几点：

1.button按钮加上js控制也可以替代submit按钮提交表单到指定的servlet

2.可以通过name属性获得指定表单的值，如: var a=this.uploadform.a.value; 以前自己真没有这样用过