Struts2SH整合uploadify实现文件上传《按钮中文解决》

1、官方下载jquery.uploadify解压后放到项目目录下，如下目录进行页面加载

<link  href="/xgrptwo/inspect/uploadify/uploadify.css"  rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/xgrptwo/inspect/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/xgrptwo/inspect/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/xgrptwo/inspect/uploadify/jquery.uploadify.v2.1.4.min.js"></script>

注意路径问题，全部使用的是绝对路径哦，不然可以因为action跳转之类的问题，js没有加载

<script type="text/javascript"><!--

$(document).ready(function(){

$("#uploadTest").uploadify({
'uploader'       : '/xgrptwo/inspect/uploadify/uploadify.swf',
'script'         : '/inspect/attChenMentInfoAction!add.action',
'method'         : 'post',
'cancelImg'      : '/xgrptwo/inspect/uploadify/cancel.png',
'fileDataName'   : 'myFile',
'queueID'        : 'fileQueue',
'folder'         : '/temp',
'auto'           : true,
'multi'          : false,
'width'          : 50,
'height'         : 30,
'buttonImg'      : '/xgrptwo/inspect/uploadify/up.png',
'wmode'          : 'transparent',
'simUploadLimit' : 2,
'sizeLimit'      : 1024000,//文件大小控制，单位是byte
'queueSizeLimit' : 999,
'fileDesc'       : 'rar文件或zip文件doc文件',
'fileExt'        : '*.rar;*.zip;*.doc',
onSelect         :function(e,queueID,fileObj){
//取到filename的值设置给input框
var filename = $("#name").attr("value");
if(filename==""){
$("#name").attr("value",fileObj.name);
//输入框只读
//$("#filename").attr("disabled","disabled");
}
},
onCancel          :function(event,queueID,fileObj,data){

//$("input[name='"+fileObj.name+"']").remove();
//没有文件选中状态，清空filename输入框的值
if(data.fileCount==0){
//输入框内容清空
$("#name").removeAttr("value");
}
},
onComplete        :function(event,queueID,fileObj,data){
//将按钮可用
$("#tijiao").removeAttr("disabled");
},
onInit            :function(){

//初始化一些东西、没有选中文件并且提交的情况下按钮不可用
$("#tijiao").attr({"disabled":"disabled"});
}
});
});
// -->
</script>

上面是页面写的js脚本进行调用和一些初始化，里面的参数网上有很多详解

<div id="fileQueue"></div>
<input type="file" name="myFile" id="uploadTest" >
<a class="link4" href="javascript:$('#uploadTest').uploadifyUpload()">点击提交</a>
<a class="link4" href="javascript:$('#uploadTest').uploadifyClearQueue()">取消上传</a>

这段用户上传文件的input框和进度条显示区域以及一些按钮操作连接，当然这些连接其实是可以不要的。。。，只要你看懂了前面，以上是最基础的，也是必须的哦

'auto' : true,
'multi' : false,

2,可能大家上传之后会遇到中文问题，这个的原因可能是jsp页面使用的编码和struts2设置的编号以及uploadify所使用的编码不一致导致的，uploadify发送使用的编码是"UTF-8"，都使用这个就没事了

3、笔者这里因项目使用的统一编码是GBK，所有出现了乱码，尚没有解决，这里我使用了一个方法解决，可供参考

<form id="uploadfrom" action="/inspect/attChenMentInfoAction!copyFileToDisk.action" method="post"  name="uploadfrom">
<table align="center" border="1" width="90%" style="border-collapse: collapse;margin-top:5px;display:block" bordercolor="#D7D7D7" cellpadding="0" cellspacing="0" id="lishijilu">
<tr class="tab_title_bg">
<td>资料名称</td><td><input id="name" name="name" type="text" size="50"></input><font color="#ff0000"><span>*</span></font></td>
<td>资料说明</td><td><input id="filecaption" name="filecaption" type="text" size="50"></input><font color="#ff0000"><span>*</span></font></td>
</tr>
<tr>
<td> </td><td colspan="3">
<input id="tijiao" name="tijiao" type="submit" value="提交" onclick="return checkForm();"></input>
</td>
</tr>
</table>
</form>

看懂了吗，即每次上传之后，我把上传的文件名设置进我的一个input框，那么用户可以自己去设置这个文件一些其他信息了，非常类似163邮箱的上传功能哦。

其实就是俩次提交，第一次提交只是将文件从客户端到服务器，同时保存到服务器某个目录下，第二次form提交就是到这个目录下去找文件，同时保存到正式目录并且记录到数据库

4、最后来看struts2的action了

public String add()
{
System.out.println(fileName+"---->>>");
String newFileName = new Date().getTime() + getExtention(fileName);

File newFile = new File(ServletActionContext.getServletContext()
.getRealPath("/upload")+"/"+fileName);
// + "/" + newFileName);
System.out.println("copy文件");
upload(myFile, newFile);
try {
ServletActionContext.getResponse().getWriter().write(0);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "success";
}

private static void upload(File src, File dst) {
try {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src),
BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0)
{
out.write(buffer);
}
}
finally
{
if (null != in)
{
in.close();
}
if (null != out)
{
out.close();
}
}
}
catch (Exception e)
{
e.printStackTrace();
}
}

private static String getExtention(String fileName) {
int pos = fileName.lastIndexOf(".");

return fileName.substring(pos);
}

5、这样就将文件保存到服务器/upload目录下了，当然实际项目中可以同时要向数据库写数据拉，以上供参考

6 、上传选择文件中文问题，据说是这个唯一的缺点， 解决方案是

　　'width' : 50,
'height' : 30,
'buttonImg' : '/xgrptwo/inspect/uploadify/up.png',
'wmode' : 'transparent',

分别是选择文件那个按钮的宽度、高度、对应的图片。。。。那么你可以自己选择图片，那么图片上就可以有中文了。

7、因实际项目隐私问题，所有部分代码没有提供，有需求的可留言，我会一一回复的，写得不好的地方请谅解，小菜鸟的小笔记本而已。。。。。

下一章：struts2实现文件下载和使用struts2的pg标签进行数据分页