2.6. 文件上传例子
用netbean 6.9.1 ,nutz-1.a.31书写。附件是完整源代码,注意要引用lib中的nutz包
在入口函数中如下定义:
@AdaptBy(type = UploadAdaptor.class,args = { "d:/uploadTemp", "8192", "UTF-8", "10" })
其中:args中用逗号分割了四个参数,第一个是临时文件夹,nutz所上传的文件都放在这里,第二个是缓冲区大小限制,第四个是临时文件个数限制
由于nutz在上传中会自动在临时文件夹中生成子文件夹,因此使用时,需要在入口函数中,增加Tempfile参数:形如
@Param("Filedata") TempFile f,
其中:Filedata 是客户端上传文件中所定义的名称。第三方上传控件,需要打印request的输入流,进行查看。
以下是例子,客户端有两个,一个使用上传组件,一个没有使用。其中的web.xml与主模块 省略,详细见相关的hello Mvc.
2.6.1. 没使用上传组件的客户端
注:
(1) 注意 “Filedata”,在服务端,得上传文件在临时文件夹中的路径时,要用上
(2) 本例上传时,会检查文件大小与格式
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
//注意 下面的“Filedata”,在服务端得上传文件在临时文件夹中的路径时,要用上
<form name ="fr" action ="upload" method ="post" enctype ="multipart/form-data" onsubmit ="return chk()" >
<input type ="file" name ="Filedata" id ="Filedata" size ="30" UNSELECTABLE ="on" />
<input type ="submit" name ="submit" value ="上传" />
</form>
<script language ="javascript" >
function chk() {
var s=fr.file.value;
if (fr.file.value == "" ) {
alert( "请输入图片地址!" );
fr.file.focus();
return false ;
}
s= s.substr(s.lastIndexOf( " . " ) + 1 , 3 );
// if (s != "gif" && s != "jpg" ){
// alert( " 请选择正确的图片格式! " )
// return false ;
//}
var img=new Image();
var FileMaxSize = 100 ; // 限制上传的文件大小,单位(k)
img.src = fr.file.value;
if (img.fileSize > FileMaxSize * 1024 ) {
alert("请上传小于100K的图片" );
fr.file.focus();
return false ;
}
}
</script>
</body>
</HTML>
2.6.2. 使用上传组件uploadify
说明:
(1)组件下载点http://www.uploadify.com/
(2)使用了jquery,下载点:http://docs.jquery.com/Downloading_jQuery
(3) uploadify 中使用了这些文件:uploadify.css;swfobject.j;jquery.uploadify.v2.1.0.min.js;uploadify.swf;cancel.png。这些文件分别在本文件同层文件夹相应的子文件中。如果 代码是:“./image/cancel.png”,表时,该文件与f.html文件同层文件夹下的名为image的文件夹中。
f.html源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>uploadify-实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/swfobject.js"></script>
<script type="text/javascript" src="./js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : './flash/uploadify.swf',
'script' : 'upload?',
'cancelImg' : './image/cancel.png',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'wmode' : 'transparent',
'simUploadLimit' : 999,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;*.txt',
'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
'onAllComplete' :function(event,data) {
$('#result').html(data.filesUploaded +'个图片上传成功');
}
});
});
</script>
<style type="text/css">
.inputcss{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
border:solid 1px #CCCCCC;
}
.buttoncss{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
background-color:#FFFFFF;
border:solid 1px #CCCCCC;
}
</style>
</head>
<body>
<table style="width: 90%;">
<tr>
<td style="width: 100px;">
<input type="file" name="uploadify" id="uploadify" />
</td>
<td align="left">
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
<span id="result" style="font-size: 13px;color: red"></span>
</td>
</tr>
</table>
<div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
</body>
</html>
2.6.3. 服务端
下面是核心代码:
@At("/upload")
@AdaptBy(type = UploadAdaptor.class,args = { "/uploadTemp", "8192", "UTF-8", "10" })
public String upload(
@Param("Filedata") TempFile f,
HttpServletRequest req,
ServletContext context)
上面中的Filedata,是客户端上传时 所使用的名称。Uploadify上传组件固定使用了Filedata名。由于Uploadify是以多次请求完成多文件上传的,而nutz无法对这种情况 给出上传文件的路径,故在用@Param("file") List<TempFile> tempFiles 进行捕捉时,会出错。
子模块完整代码:
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import org.nutz.mvc.annotation.AdaptBy;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.Param;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;
@Ok("json")
// @Filters({@By(type=MyFilter.class)})
public class HelloWorld {
/*
* 注释"@Param("Filedata ") List<TempFile> tempFiles," 中的Filedata是客户端
* <input type =" Filedata " name =" Filedata " id ="file" /> 中的name名
*/
@At("/upload")
@AdaptBy(type = UploadAdaptor.class,args = { "/uploadTemp", "8192", "UTF-8", "10" })
public String upload(
@Param("Filedata") TempFile f,
HttpServletRequest req,
ServletContext context) throws SQLException, IOException {
String aa="dd";
// 当@AdaptBy这句被注释不执行时,以下的代码可查看上传文件的格式
// InputStream in= req.getInputStream();
// ByteArrayOutputStream baos = new ByteArrayOutputStream();
// int i = -1;
//
// while ((i =in.read()) != -1) {
// baos.write(i);
// }
// System.out.println( baos.toString());
// String str="";
return "";
}
}