歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Struts2文件上傳的運行過程實現

1.1.  文件上傳的實現步驟

1)在表單<form>標簽設置屬性enctype的值為"multipart/form-data", enctype屬性用於指定表單數據的編碼方式, “multipart/form-data"編碼方式指定以二進制流的方處理表單數據,並把文件域指定文件的內容封裝在請求參數中。

<form name=""action="" method="post"enctype="multipart/form-data">

2)在jsp頁面添加文件域標簽<input type="file" name="xxx"/>, name屬性用於指定文件域的名稱。

3)在Action類中定義3個屬性來封裝該文件域的信息:

a. 類型為File的xxx屬性封裝該文件域對應的文件內容。

b. 類型為String的xxxFileName屬性封裝文件域對應的文件的文件名。

c. 類型為String的xxxContentType屬性封裝文件域對應的文件的文件類型。

Example:

JSP頁面:

<formname="" action="" method="post"enctype="multipart/form-data">

<input type="file"name="upload"/>

<inputtype="submit"/>

</form>

Action類:

private File upload; //上傳文件的File對象

private String uploadFileName; //上傳文件的文件名

private String uploadContentType; //上傳文件的內容類型

//getter & setter方法

4)在Action類的業務方法中將File對象復制到服務器端對應的目錄下。

//工具方法,將文件source的內容復制到文件dest中

publicstaticvoid copyFile(File source,File dest) throws Exception{

//創建輸入流和輸出流

FileInputStream fis=new FileInputStream(source);

FileOutputStream fos=new FileOutputStream(dest);

//fis--->fos

byte[] b=newbyte[1024];

int len;

while((len=fis.read(b))!=-1){

fos.write(b, 0, len);

}

//關閉流

fis.close();

fos.close();

}

1.2.    Struts2文件上傳的運行過程

1)fileupload攔截器將浏覽器端的文件復制到服務端的臨時目錄下(由struts.multipart.saveDir指定):

客戶端文件 ---> saveDir/臨時文件

2)fileupload攔截器創建臨時文件的File對象,賦給Action類對應File類型的upload屬性:

saveDir/臨時文件 ---> File upload

同時設置uploadFileName屬性和uploadContentType屬性。

3)在Action類將File upload復制到服務器端指定的目錄下:

File upload ---> images/uploadFileName

------------------------------------------------------------------>

具體實現

1.測試頁面,主要關注文件域開始以及相應form表單跳轉的action鏈接

  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>用戶注冊</title>  
  8. <link type="text/css" rel="stylesheet" href="/dang/css/user.css"/>  
  9. <script charset="gbk" type="text/javascript"  src="/dang/js/jquery-1.4.1.js"></script>  
  10. <script charset="gbk" type="text/javascript"  src="/dang/js/jquery.validate.js"></script>  
  11. <script type="text/javascript">  
  12.     //跟換驗證碼  
  13.     function changVcode(){  
  14.         //獲取圖像對象的元素對象  
  15.         var idVcode = document.getElementById("idVcode");  
  16.         //改變其屬性  
  17.         idVcode.src="/dang/vcode.action?d="  
  18.                 +new Date().getTime();  
  19.     }  
  20. </script>  
  21. <script type="text/javascript">  
  22.  $(function(){  
  23.      //表單驗證  
  24.      $('#registerForm').validate({  
  25.        rules:{  
  26.          'user.userName':{required:true},  
  27.          'user.nickname':{required:true,minlength:4,maxlength:20},  
  28.          'user.userPassword':{required:true,minlength:6,maxlength:20},  
  29.          passwordAgain:{required:true,equalTo:'#txtPassword'},  
  30.          'user.email':{required:true,email:true},  
  31.          vcode:{required:true}  
  32.        },  
  33.        messages:{  
  34.          'user.userName':{required:"<img src='/dang/images/wrong.gif'/>用戶名不能為空"},  
  35.          'user.nickname':{required:"<img src='/dang/images/wrong.gif'/>昵稱不能為空",  
  36.                           minlength:"<img src='/dang/images/wrong.gif'/>昵稱的長度不能少於{0}位",  
  37.                           maxlength:"<img src='/dang/images/wrong.gif'/>昵稱的長度不能大於{0}位"},  
  38.          'user.userPassword':{required:"<img src='/dang/images/wrong.gif'/>密碼不能為空",  
  39.                               minlength:"<img src='/dang/images/wrong.gif'/>密碼的長度不能少於{0}位",  
  40.                               maxlength:"<img src='/dang/images/wrong.gif'/>密碼的長度不能大於{0}位"},  
  41.          passwordAgain:{required:"<img src='/dang/images/wrong.gif'/>確認密碼不能為空",  
  42.                     equalTo:"<img src='/dang/images/wrong.gif'/>確認密碼和密碼不相等"},                            
  43.          'user.email':{required:"<img src='/dang/images/wrong.gif'/>Email地址不能為空",  
  44.                        email:"<img src='/dang/images/wrong.gif'/>Email地址格式無效"},  
  45.          vcode:{required:"<img src='/dang/images/wrong.gif'/>驗證碼不能為空"}  
  46.        },  
  47.        errorPlacement:function(error,element){  
  48.          error.appendTo(  
  49.         element.parent().next().find("span").eq(0));          
  50.        }  
  51.      });  
  52.    });  
  53. </script>  
  54. </head>  
  55. <body>  
  56. <div class="container">  
  57.    <!-- header begin -->  
  58.    <div class="header">  
  59.      <a href="http://localhost:8080/dang">  
  60.        <img border="0" alt="我的當當網" src="/dang/images/logo_20110808.png"/>  
  61.      </a>  
  62.    </div>  
  63.    <!-- header end -->  
  64.    <!-- middle begin -->  
  65.    <div class="middle register">  
  66.       <h1>歡迎注冊我的當當網!</h1>  
  67.       <div>  
  68.       <span class="error"></span>  
  69.        <form id="registerForm" name="registerForm"   
  70.              enctype="multipart/form-data"    
  71.              action="/dang/user/register.action"  
  72.              method="post">    
  73.          <table>  
  74.            <tr><td class="c1">請輸入您的用戶名:</td>  
  75.                <td class="c2">               
  76.                 <input id="userName" name="user.userName"/>  
  77.                </td>  
  78.                <td class="c3">  
  79.                 <span id="userNameInfo" class="info"></span>  
  80.                </td></tr>  
  81.            <!-- 文件域開始 -->  
  82.            <tr><td class="c1">上傳頭像</td>  
  83.                 <td class="c2"><input type="file" name="upload"></td>  
  84.            </tr>  
  85.            <tr><td class="c3"></td></tr>  
  86.            <!-- 文件域開始 -->  
  87.            <tr><td class="c1">設置您的昵稱:</td>  
  88.                <td class="c2"><input name="user.nickname"/></td>  
  89.                <td class="c3">  
  90.                <span class="tip">您的昵稱由英文字母、數字、中文組成,長度為4-20個字符<br/></span>  
  91.                </td></tr>  
  92.            <tr><td class="c1">設置密碼:</td>  
  93.                <td class="c2"><input id="txtPassword" type="password" name="user.userPassword"/></td>  
  94.                <td class="c3"><span class="tip">你的密碼由英文字母、數字組成,長度6-20位<br/></span></td></tr>  
  95.            <tr><td class="c1">再次輸入您設置的密碼:</td>  
  96.                <td class="c2"><input type="password" name="passwordAgain"/></td>  
  97.                <td class="c3">  
  98.                <span class="tip"></span>  
  99.                </td></tr>  
  100.            <tr><td class="c1">請填寫您的Email地址:</td>  
  101.                <td class="c2"><input name="user.email"/></td>  
  102.                <td class="c3"><span class="tip"></span></td></tr>  
  103.            <tr><td class="c1">驗證碼:</td>  
  104.                <td class="c2">  
  105.                  <input name="vcode" style="width:96px;"/>  
  106.                  <img id="idVcode" alt="驗證碼" src="/dang/vcode.action" align="bottom" style="height:20px;"/>  
  107.                </td>  
  108.                <td class="c3">  
  109.                   <span class="tip">請輸入圖片中文字    
  110.                   <a id="idRefresh" href="#" onclick="changVcode()">看不清,再換一張</a>  
  111.                   <br/>  
  112.                   <font color="red">${vcode_info}</font>  
  113.                   </span>  
  114.                </td></tr>  
  115.          </table>  
  116.          <div>  
  117.          <input id="btn_register" type="image" class="btn_register" alt=""   
  118.                 src="/dang/images/register.jpg"/>                 
  119.                  
  120.         </div>  
  121.        </form>  
  122.       </div>  
  123.    </div>  
  124.    <!-- middle end -->  
  125.    <!-- footer begin -->  
  126.    <div class="footer">  
  127.        Copyright © dangdang v2.0, 2011-2012, All Rights Reserved  
  128.            |     京ICP證08000853號  北京達內科技有限公司  
  129.         <br/>  
  130.         <img alt="" src="/dang/images/validate.gif"/>      
  131.         <img alt="" src="/dang/images/knetSealLogo.png"/>  
  132.    </div>  
  133.    <!-- footer end -->  
  134. </div>  
  135. </body>  
  136. </html>  
Copyright © Linux教程網 All Rights Reserved