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

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

Admin

2011年10月18日

来源于：http://www.mysjtu.com/page/M0/S609/609473.html

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="upload" action="/inspect/attChenMentInfoAction!copyFileToDisk.action" method="post"  name="upload">
<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标签进行数据分页