uploadify上传文件学习

163 阅读 0 评论 108 点赞

我是靠谱客的博主昏睡机器猫，这篇文章主要介绍uploadify上传文件学习，现在分享给大家，希望可以做个参考。

uploadify是一款优秀jQuery插件，主要功能是批量上传文件。
uploadify这个插件是基于js里面的jquery库写的。
结合了ajax和flash，实现了这个多线程上传的功能。

由于基于jquery库，所以我也添加了jquery相关文件：

jquery-1.11.1
jquery-easyui-1.4.3

这是使用uploadify插件所包含的文件：
这里写图片描述

在这里我才用了struts2框架进行开发：，这里是web.xml文件的配置

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

    <!-- Struts2 -->
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>   
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>*.action</url-pattern>
    </filter-mapping>

</web-app>

网页前端进行上传代码

复制代码

<script type="text/javascript" src="resources/jquery-1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/color.css">
<script type="text/javascript" src="resources/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

function fileupload(){
    $('#wsbuploadify').uploadify({
        'swf':'resources/uploadify/uploadify.swf', //指定上传控件的主体文件
        'uploader':'file!fileUpload.action',   //指定服务器端上传处理文件
        width: 80,                          
        height: 20,                         
        buttonText: "上传文件",                
        buttonCursor: 'hand', 
        fileTypeDesc:'请上传XXX文件',   //可选择的文件类型的描述。此字符串出现在浏览文件对话框的文件类型下拉菜单中。
        fileObjName: 'uploadify',//定义上传数据处理文件中接收数据使用的文件对象名。      
        auto: true,                //设置auto为true，当文件被添加至上传队列时，将会自动上传。
        multi: true, //设置值为false时，一次只能选中一个文件。
        onUploadStart:function(file){//在开始上传之前的瞬间会触发该事件。
        XXXXXXXXXXXX
            }

},
        onUploadSuccess: function (file, data, response) {//每一个文件上传成功时触发该事件。
            alert(file);
            alert(data);
            alert(response);
            }

},
        onSWFReady: function (file, data, response) {//当flash按钮载入完毕时触发该事件。
        }                                                      
        });

}       
</script>

</div>
        </div>
  </body>
  <a href='javascript:void(0)' onclick='uploadfile(""+ row.test_id + "")'>导出试验数据</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 <!-- jquery -->
<script type="text/javascript" src="resources/jquery-1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="resources/uploadify/uploadify.css" />
<script type="text/javascript" src="resources/uploadify/jquery.uploadify.js"></script>

<!-- jquery easyui -->
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.3/themes/color.css">
<script type="text/javascript" src="resources/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
        $(function(){
        fileupload();//文件上传初始化
        });

function fileupload(){
    $('#wsbuploadify').uploadify({
        'swf':'resources/uploadify/uploadify.swf', //指定上传控件的主体文件
        'uploader':'file!fileUpload.action',   //指定服务器端上传处理文件
        width: 80,                          
        height: 20,                         
        buttonText: "上传文件",                
        buttonCursor: 'hand', 
        fileTypeDesc:'请上传XXX文件',   //可选择的文件类型的描述。此字符串出现在浏览文件对话框的文件类型下拉菜单中。
        fileObjName: 'uploadify',//定义上传数据处理文件中接收数据使用的文件对象名。      
        auto: true,                //设置auto为true，当文件被添加至上传队列时，将会自动上传。
        multi: true, //设置值为false时，一次只能选中一个文件。
        onUploadStart:function(file){//在开始上传之前的瞬间会触发该事件。
        XXXXXXXXXXXX
            }

        },
        onUploadSuccess: function (file, data, response) {//每一个文件上传成功时触发该事件。
            alert(file);
            alert(data);
            alert(response);
            }

        },
        onSWFReady: function (file, data, response) {//当flash按钮载入完毕时触发该事件。
        }                                                      
        });

}       
</script>

  <body>
    <div id="fjsc" title="附件上传">            
            <div style="padding: 3px">  
                <input id="fjzt" name="fjzt" type="hidden"/>
                <table style="margin-top:5px;">
                    <tr>                                                    
                        <td ><input type="file" name="wsbuploadify" id="wsbuploadify"/></td>                
                        <td style="vertical-align:text-top;"></td>
                    </tr>
                </table>

                 <div id="wsbfilegrid" style="float: right;margin-top: 2px"></div>

                 <table width="100%">
                    <tr><td  align="center"><input type="button" onclick="closeWin()" style="width: 70px" value="提交"/></td></tr>
                 </table>                

            </div>
        </div>
  </body>
  <a href='javascript:void(0)' onclick='uploadfile(""+ row.test_id + "")'>导出试验数据</a>

配置strurts.xml
接收action:

private File uploadify;
private String uploadifyFileName;
File file = new File(path);
String docname = “123456” +prefix;
try {
FileUtils.copyFile(uploadify, new File(new File(“filepath”), “newfilename”));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}