文件上传插件Uploadify在Struts2中的应用，完整详细实例

—》最近由于项目需要使用到一个上传插件，在网上发现uploadify挺不错，所以决定使用它，但是官网文档和例子是php的，而项目是SSI框架的，所以自己对uploadify在struts2中的使用进行了一番研究，最终实现了。发现网上关于这方面的资料很少，而且有的一两篇例子还不大全，网友提问质疑很多，所以，下面我特将我的代码公布：

---------------------------------------------------------------------
步骤一：到官网上下载uploadify的JS文件。注意，还得需要Jquery文件。还没有的朋友，自己到www.jquery.com上面找来下载吧。

Uploadify在线演示：在线Demo

Uploadify配置参数及接口文档：http://www.uploadify.com/documentation

Uploadify插件下载地址：http://www.uploadify.com/download

--------------------------------------------------------------------
步骤二：下载好uploadify压缩包文件后，解压文件包。在文件夹中找到以下五个文件，并添加到项目的对应路径中：
    jquery.uploadify.v2.1.0.js
   swfobject.js
   uploadify.swf
   uploadify.css
   cancel.png

---------------------------------------------------------------------
步骤三：书写JSP文件，以下截取核心部分。也就是和upload有关的代码。

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/tech/jquery/swfobject.js"></script>
<script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.uploadify.v2.1.0.js"></script>

<link href="<%=path %>/css/tech/jquery/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
        $(document).ready(function() {
            $("#fileupload").uploadify({
                /*注意前面需要书写path的代码*/
                'uploader'       : '<%=path%>/medium/jquery/uploadify.swf',
                'script'         : '<%=path%>/commonutil/uploadUtil.action',
                'cancelImg'      : '<%=path%>/pic/tech/jquery/uploadify/cancel.png',
                'queueID'        : 'fileQueue', //和存放队列的DIV的id一致
                'fileDataName'   : 'fileupload', //和以下input的name属性一致
                'auto'           : false, //是否自动开始
                'multi'          : true, //是否支持多文件上传
                'buttonText'     : 'Browse', //按钮上的文字
                'simUploadLimit' : 3, //一次同步上传的文件数目
                'sizeLimit'      : 19871202, //设置单个文件大小限制
                'queueSizeLimit' : 2, //队列中同时存在的文件个数限制
                'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
                'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
            onComplete: function (event, queueID, fileObj, response, data) {
$('<li></li>').appendTo('.files').text(response);
},
onError: function(event, queueID, fileObj) {
             alert("文件:" + fileObj.name + "上传失败");
       },
       onCancel: function(event, queueID, fileObj){
       alert("取消了" + fileObj.name);
       }
            });

        });
        </script>

<script type="text/javascript">
                  //必须的
function uploadifyUpload(){
   $('#fileupload').uploadifyUpload();
}
</script>

......(该部分为其他无关的JSP代码，省略)

<tr>
<td>上传图片：</td>
<td>
<input type="file" name="fileupload" >
        </action>

    </package>

</struts>

----------------------------------------------------------------------
      以上就是全部代码的书写。经测试，是没问题的。

最后需要补充的一点是：当设置了'sizeLimit'属性来设置单个文件大小限制时候，在选择文件时候当超过大小时候是不提示的，还是会添加到队列中，但是，当点击开始上传的时候，才会进行对应提示。我觉得这也是这个插件一个不完美的地方，有兴趣的朋友可以自己写下方法去实现这一环节，让在选文件的时候就进行提示，超过大小就不允许添加进队列中吧。

好了，其他相关的说明，我在代码中关键的地方都已经注释很清楚了，大家仔细阅读注释，就可以懂怎么使用。

文件上传插件Uploadify在Struts2中的应用，完整详细实例

相关推荐