uploadify上传文件学习

来源：互联网发布：adobe pdf mac 编辑：程序博客网时间：2024/06/05 22:06

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

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

jquery-1.11.1
jquery-easyui-1.4.3

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

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

<?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>

网页前端进行上传代码

 <!-- 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;
}

0 0