struts2 批量上传.

朋友需求,让我做JQ 动态验证。之前用了这个

$("#ulFile").validate({

    rules : {

                upload1 : {

                required : true

    },

    upload2 : {

                required : true

    },

    upload3 : {

                required : true

    }

    },

    messages : {

                upload1 : {

                            required : "<font color='red'>请选择文件</font>"

                },

                upload2 : {

                            required : "<font color='red'>请填写密码</font>"

                },

                upload3 : {

                            required : "<font color='red'>请选择文件</font>"    

                }

   }

 });

不过struts要求name一样。JQ则要求不一样。我本想着在提交前改name为统一值,但是捕捉不到那一刻。想改JQ源码,但是无奈能力问题。所以最后写成了下面这样子,勉强用着吧。

 

<%@ page language="java" contentType="text/html; charset=utf-8" 

pageEncoding="utf-8"%>

<%@taglib prefix="s" uri="/struts-tags" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="comm/js/jquery-1.7.js" type="text/javascript"></script>

<link rel="stylesheet" href="comm/css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<link rel="stylesheet" href="comm/css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />

<script src="comm/js/jquery.validate.min.js" type="text/javascript"></script>

<title>upload</title>

<script type="text/javascript">

/*菜鸟思路:根据得到文件路径来判断是否选择文件,所以设置了前面路径文本框为不可写入。

如果设置成写入还需要判断文件存不存在,更加麻烦。

*/

  $(document).ready(function(){

    $("#add").click(function(){

         var tmp = $(":file").size()+1;

         var html = "<tr>"+

         "<td class='tdLabel'>"+

         "<label for='"+tmp+"' class='label'>"+tmp+"\:</label>"+

         "</td>"+

         "<td>"+

         "<input type='file'name='upload'id='"+tmp+"'>"+

         "</td>"+

         "<td>"+

         "<span id = 'span"+tmp+"'style = 'color:red'></span>"+

         "</td>"+

         "</tr>";

         $("#wwFormTable tbody").append(html);    

    });  

 

  $("#sub").click(function(){

         var size = $(":file").size();

         var boo = true;

         var num = 0;

         var reg = /^\s*$/;

         for ( var i = 1; i <= size ; i++) {

             var tmpValue = document.getElementById(i+"").value;

             if(reg.test(tmpValue)){

                  $("#span"+i+"").html("请选择文件!!");

             }else{

                  $("#span"+i+"").html("");

                  num = num + 1

              }

         }

         if(num != size){

              boo = false;

         }

         if(boo){

              document.ulFile.submit();

         }

       })

   });

</script>

</head>

<body>

<h1>批量上传文件</h1>

<button id ='add'>增加文件上传对话框</button>

    <s:form action ="action!doUpload.action" method ="POST" enctype ="multipart/form-data" id ="ulFile"> 

    <table id="wwFormTable"> 

        <tbody>

            <tr>

              <td class="tdLabel"><label for="1" class="label">1:</label></td>

              <td><input type="file" name="upload" value="" id="1" onkeydown="return false" onpaste="return false" ></td>

              <td><span id="span1" style="color:red"></span></td>

           </tr>

            <tr>

             <td class="tdLabel"><label for="2" class="label">2:</label></td>

             <td><input type="file" name="upload" value="" id="2" onkeydown="return false" onpaste="return false" ></td>

             <td><span id="span2" style="color:red"></span></td>

             </tr>

             <tr>

                 <td class="tdLabel"><label for="3" class="label">3:</label></td>

                 <td><input type="file" name="upload" value="" id="3" onkeydown="return false" onpaste="return false" ></td>

                 <td><span id="span3" style="color:red"></span></td>

            </tr>

</tbody> 

</table>

    </s:form > 

    <button id="sub" >差不多了,提交。</button> 

</body>

 

</html>

posted @ 2013-11-26 19:46  鱼尾纹  阅读(253)  评论(0编辑  收藏  举报