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鏈接
- <%@ page language="java" contentType="text/html; charset=utf-8"
- pageEncoding="utf-8"%>
- <!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">
- <title>用戶注冊</title>
- <link type="text/css" rel="stylesheet" href="/dang/css/user.css"/>
- <script charset="gbk" type="text/javascript" src="/dang/js/jquery-1.4.1.js"></script>
- <script charset="gbk" type="text/javascript" src="/dang/js/jquery.validate.js"></script>
- <script type="text/javascript">
- //跟換驗證碼
- function changVcode(){
- //獲取圖像對象的元素對象
- var idVcode = document.getElementById("idVcode");
- //改變其屬性
- idVcode.src="/dang/vcode.action?d="
- +new Date().getTime();
- }
- </script>
- <script type="text/javascript">
- $(function(){
- //表單驗證
- $('#registerForm').validate({
- rules:{
- 'user.userName':{required:true},
- 'user.nickname':{required:true,minlength:4,maxlength:20},
- 'user.userPassword':{required:true,minlength:6,maxlength:20},
- passwordAgain:{required:true,equalTo:'#txtPassword'},
- 'user.email':{required:true,email:true},
- vcode:{required:true}
- },
- messages:{
- 'user.userName':{required:"<img src='/dang/images/wrong.gif'/>用戶名不能為空"},
- 'user.nickname':{required:"<img src='/dang/images/wrong.gif'/>昵稱不能為空",
- minlength:"<img src='/dang/images/wrong.gif'/>昵稱的長度不能少於{0}位",
- maxlength:"<img src='/dang/images/wrong.gif'/>昵稱的長度不能大於{0}位"},
- 'user.userPassword':{required:"<img src='/dang/images/wrong.gif'/>密碼不能為空",
- minlength:"<img src='/dang/images/wrong.gif'/>密碼的長度不能少於{0}位",
- maxlength:"<img src='/dang/images/wrong.gif'/>密碼的長度不能大於{0}位"},
- passwordAgain:{required:"<img src='/dang/images/wrong.gif'/>確認密碼不能為空",
- equalTo:"<img src='/dang/images/wrong.gif'/>確認密碼和密碼不相等"},
- 'user.email':{required:"<img src='/dang/images/wrong.gif'/>Email地址不能為空",
- email:"<img src='/dang/images/wrong.gif'/>Email地址格式無效"},
- vcode:{required:"<img src='/dang/images/wrong.gif'/>驗證碼不能為空"}
- },
- errorPlacement:function(error,element){
- error.appendTo(
- element.parent().next().find("span").eq(0));
- }
- });
- });
- </script>
- </head>
- <body>
- <div class="container">
- <!-- header begin -->
- <div class="header">
- <a href="http://localhost:8080/dang">
- <img border="0" alt="我的當當網" src="/dang/images/logo_20110808.png"/>
- </a>
- </div>
- <!-- header end -->
- <!-- middle begin -->
- <div class="middle register">
- <h1>歡迎注冊我的當當網!</h1>
- <div>
- <span class="error"></span>
- <form id="registerForm" name="registerForm"
- enctype="multipart/form-data"
- action="/dang/user/register.action"
- method="post">
- <table>
- <tr><td class="c1">請輸入您的用戶名:</td>
- <td class="c2">
- <input id="userName" name="user.userName"/>
- </td>
- <td class="c3">
- <span id="userNameInfo" class="info"></span>
- </td></tr>
- <!-- 文件域開始 -->
- <tr><td class="c1">上傳頭像</td>
- <td class="c2"><input type="file" name="upload"></td>
- </tr>
- <tr><td class="c3"></td></tr>
- <!-- 文件域開始 -->
- <tr><td class="c1">設置您的昵稱:</td>
- <td class="c2"><input name="user.nickname"/></td>
- <td class="c3">
- <span class="tip">您的昵稱由英文字母、數字、中文組成,長度為4-20個字符<br/></span>
- </td></tr>
- <tr><td class="c1">設置密碼:</td>
- <td class="c2"><input id="txtPassword" type="password" name="user.userPassword"/></td>
- <td class="c3"><span class="tip">你的密碼由英文字母、數字組成,長度6-20位<br/></span></td></tr>
- <tr><td class="c1">再次輸入您設置的密碼:</td>
- <td class="c2"><input type="password" name="passwordAgain"/></td>
- <td class="c3">
- <span class="tip"></span>
- </td></tr>
- <tr><td class="c1">請填寫您的Email地址:</td>
- <td class="c2"><input name="user.email"/></td>
- <td class="c3"><span class="tip"></span></td></tr>
- <tr><td class="c1">驗證碼:</td>
- <td class="c2">
- <input name="vcode" style="width:96px;"/>
- <img id="idVcode" alt="驗證碼" src="/dang/vcode.action" align="bottom" style="height:20px;"/>
- </td>
- <td class="c3">
- <span class="tip">請輸入圖片中文字
- <a id="idRefresh" href="#" onclick="changVcode()">看不清,再換一張</a>
- <br/>
- <font color="red">${vcode_info}</font>
- </span>
- </td></tr>
- </table>
- <div>
- <input id="btn_register" type="image" class="btn_register" alt=""
- src="/dang/images/register.jpg"/>
-
- </div>
- </form>
- </div>
- </div>
- <!-- middle end -->
- <!-- footer begin -->
- <div class="footer">
- Copyright © dangdang v2.0, 2011-2012, All Rights Reserved
- | 京ICP證08000853號 北京達內科技有限公司
- <br/>
- <img alt="" src="/dang/images/validate.gif"/>
- <img alt="" src="/dang/images/knetSealLogo.png"/>
- </div>
- <!-- footer end -->
- </div>
- </body>
- </html>