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;
}
最后
以上就是昏睡机器猫最近收集整理的关于uploadify上传文件学习的全部内容,更多相关uploadify上传文件学习内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复