环境准备好了,开始做页面,
在页面导入需要的文件:
<script type="text/javascript" src="jquery-1.8.min.js">《script》
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js">《script》
JS代码:
<script type="text/javascript">
$(document).ready(function(){
$("#imageify").uploadify({
'fileObjName' : 'file', //提交时候的字段名,和struts2里面用来接收File的字段名一致
method : 'get', //以get方式上传
'buttonText':'上传', //上传按钮的文字
'fileTypeDesc':'Image Files', //可上传文件格式的描述
'fileTypeExts':'*.gif; *.jpg; *.png', //可上传的文件格式
'auto':true, //选择一个文件是否自动上传
'multi':true, //是否允许多选(这里多选是指在弹出对话框中是否允许一次选择多个,但是可以通过每次只上传一个的方法上传多个文件)
swf : 'uploadify/uploadify.swf', //指定swf文件的,默认是uploadify.swf
uploader : 'upload.action', //服务器响应地址
'formData' : {'name':'lmy'}, //这里是上传时候指定的参数,如果需要动态指定参数需要在onUploadStart方法里面指定
'onUploadStart' : function(file) { //上传前触发的事件
//在这里添加 $('#imageify').uploadify('cancel'); 可以取消上传
//$("#imageify").uploadify("settings","formData",{'name':'lmy1'}); //动态指定参数
} ,
'onUploadSuccess' : function(file, data, response) { //上传成功后触发的事件
alert("上传成功");
}
});
});
《script》
代码:
前台页面准备完毕,如果没有问题的话 imageify 会变成这样的样式:
jquery.uploadify会把id为imageify的file变成一个按钮,单击按钮会弹出一个对话框让你选择文件
选择一个文件,双击获得选择之后点保存,就会开始上传文件,现在没有开始做后台,所以上传会失败
接下来准备开始做后台,添加struts2需要的包,搭建好struts2的环境,在web.xml里面提价struts2的过滤器,
配置upload.action,需要注意的是,struts2默认的上传文件大小最大为2M,如果需要上传的文件大于2M,需要在struts.xml添加一句代码:
这里的value是以字节为单位。
upload.action的内容:
private File file = null; //和在JS中指定的fileObjName的值相同
private String fileFileName = null; //[fileName]FileName 获得上传文件的名称
private String fileContentType = null;//[fileName]ContentType 获得上传文件的类型
public String execute()throws Exception{
String path = "D:\"; //存储地址为D盘根目录
FileOutputStream fos = new FileOutputStream(path+fileFileName); //输出流
FileInputStream fis = new FileInputStream(file); //输出流
byte[] buffer = new byte[1024];
int len = 0;
while((len=fis.read(buffer))!=-1){
fos.write(buffer);;
}
fos.close();
fis.close();
return null; //这里不需要返回任何东西
}
//get set方法...
后台写完之后再回到页面上,选择需要上传的文件,就会进行上传,提示上传成功
开发时候遇到问题:jquery.uploadify这个插件小巧,简单,功能实用,支持多文件上传(这里虽然说是多文件上传,但是底层还是一个一个的上传,不是一次上传所有,是当一个上传成功之后马上上传下一个),而且这里是使用flash上传的,后台响应的时候得到的session和通过ajax提交得到的session不同,也就是说虽然是同一个页面,但会产生两个不同的session。也就是说上传的时候不能得到之前存在session里面的用户信息,这就需要在页面里面指定参数'formData' : {'name':'lmy'}生成用户标识信息,后台根据标识信息得到是哪个用户上传的。