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

最新推荐文章于 2022-11-15 23:00:51 发布

山清水秀iOS

最新推荐文章于 2022-11-15 23:00:51 发布

阅读量194

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/java-pan/archive/2012/02/21/upload.html

版权

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

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

upload.html

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3     <head>
  4         <title>文件上传</title>
  5         <meta name="Generator" content="EditPlus">
  6         <meta name="Author" content="">
  7         <meta name="Keywords" content="">
  8         <meta name="Description" content="">
  9         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 10 
 11 <script>
 12 //文件提交之前一个简单的js校验
 13 function upFile(){
 14  //获得File的值
 15  var a=this.uploadform.a.value;
 16  var b=this.uploadform.b.value;
 17  var c=this.uploadform.c.value;
 18  
 19  //三个文件表单同时为空的时候提示
 20  if(a==""&&b==""&&c=="")
 21  { 
 22    alert("请选择文件");
 23 return;
 24  }
 25  
 26 //验证完成后跳转到指定的servlet处理
 27 this.uploadform.action="upload";//不能有左斜杠/   用此种方式访问后跳转的url为：http://localhost:8080/UpDown/upload  OK
 28 //错误的方式---> this.uploadform.action="/upload"; 用此种方式访问后跳转的url为：http://localhost:8080/upload         NG
 29    
 30 this.uploadform.submit();
 31 }
 32 
 33 //得到文件的后缀名
 34 function expType(obj){
 35 var re=/(\\+)/g;
 36 var error=obj.replace(re,"#").split("#");
 37 var fileName=error[error.length-1]; //如test.txt
 38 var expData=fileName.split(".");
 39 var expType=expData[expData.length-1];//得到文件a的后缀名txt   
 40 return expType;
 41  }
 42  
 43 //动态校验上传文件的后缀名 
 44  function verify(id){
 45  var fileValue=document.getElementById(id).value;
 46  var expName=expType(fileValue);
 47  var errorType =new Array(".exe", ".com", ".cgi", ".asp");//这些后缀名的文件不能上传
 48  for(i in errorType)
 49    {
 50 if(errorType[i]==("."+expName)){
 51        alert(errorType[i]+"格式的文件不能上传");
 52 return;
 53      }
 54    }
 55  }
 56 </script>
 57 
 58     </head>
 59 
 60     <body>
 61         <strong>文件上传演示demo---上传到本机文件夹中(程序和上传目录在同一主机)</strong>
 62         <!-- 
 63         1.上传的内容有图片的时候，form中必须加入 ENCTYPE="multipart/form-data" 
 64         2.在<input>标签中必须有name属性(除了提交按钮submit)，否则运行时虽然不会报错，但是文件无法成功上传
 65 -->
 66         <form name="uploadform" method="POST"  action="upload"
 67             ENCTYPE="multipart/form-data">
 68             <table border="1" width="450" cellpadding="4" cellspacing="2"
 69                 bordercolor="#9BD7FF">
 70                 <tr>
 71                     <td width="100%" colspan="2">
 72                         文件1：
 73                         <input id="aFile" name="a" size="40" type="file"  onblur="verify(id)"><!-- οnblur="" -->
 74                     </td>
 75                 </tr>
 76                 <tr>
 77                     <td width="100%" colspan="2">
 78                         文件2：
 79                         <input id="bFile" name="b" size="40" type="file" onblur="verify(id)">
 80                     </td>
 81                 </tr>
 82                 <tr>
 83                     <td width="100%" colspan="2">
 84                         文件3：
 85                         <input id="cFile" name="c" size="40" type="file" onblur="verify(id)">
 86                     </td>
 87                 </tr>
 88 
 89             </table>
 90 
 91             <table>
 92                 <tr>
 93                     <td align="center">
 94                     <!-- 
 95                         <input name="upload" type="submit" value="开始上传" />
 96 -->
 97                         <input name="upload" type="button" value="开始上传" onclick="upFile()" />
 98                     </td>
 99                 </tr>
100             </table>
101 
102         </form>
103     </body>
104 </html>

效果截图：

图1:

截图2：

截图3：

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

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

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

转载于:https://www.cnblogs.com/java-pan/archive/2012/02/21/upload.html

山清水秀iOS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上传简介1---上传到指定的目录3

本节摘要：前面介绍了文件上传到目录，本节是对uoload.html前面前台做了一定的修改，加了一些校验在前台。修改后的upload.html文件如下：upload.html 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt...
复制链接

扫一扫