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>&nbsp;</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标签进行数据分页