uploadify目前最新版是3.2.1, 官网上介绍的资料是使用index.php,而没有介绍在jsp上的上传, 在网上搜到的资料是关于版本较低的,跟这个版本用法不一样了, 下载后解压就是这样:
1.jsp上引入css和js, uploadify还需要引入jquery
<head>
<link href="../uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../control/jquery-1.9.0.min.js" ></script>
<script type="text/javascript" src="../uploadify/jquery.uploadify.min.js"></script>
</head>
<body>
<input type="file" id="uploadify" name="uploadify">
<div id="fileQueue"></div>
<a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>
<a href="javascript:$('#uploadify').uploadify('cancel')">取消所有上传</a>
</body>
2.页面上的js, 在页面加载的时候执行
<script type="text/javascript">
window.onload=function(){
upVideo();
}
function upVideo(){
$("#uploadify").uploadify({
'auto' : false, //选完文件后是否自动上传
'swf' : '../uploadify/uploadify.swf', //引入uploadify.swf
'uploader' : 'struts2的action请求路径',//请求路径
'queueID' : 'fileQueue',//队列id,用来展示上传进度的
'queueSizeLimit' : 3, //同时上传文件的个数
'fileTypeDesc' : '视频文件',
'fileTypeExts' : '*.avi;*.rmvb;*.wmv;*.mp4', //控制可上传文件的扩展名
'multi' : true, //允许多文件上传
'buttonText' : '上传视频',//按钮上的文字
'fileSizeLimit' : '200MB', //设置单个文件大小限制
'fileObjName' : 'uploadify', //<input type="file"/>的name
'method' : 'post',
'removeCompleted' : true,//上传完成后自动删除队列
'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发
//data就是action中返回来的数据
文件传上去后,你可以把文件的名称等信息写回来, 把值赋给隐藏的input,再提交过去将文件的路径等其他信息存到数据库,实现异步上传,而且你还可以在这里动态创建一个删除按钮, 点击时发送ajax请求,把文件名发送过去,把刚上传的视频删了
},
'onQueueComplete' : function(){//所有文件上传完成
}
});
}
3,完成上面两步, 而且你的浏览器安装了flash插件,会有如下效果:
点击按钮, 会弹出选文件的窗口, IE9下无法弹出,关了页面后才弹出,没找到解决方案,好在客户只要求IE8能用就行
4,选完文件后出现文件队列
这里有点小问题, 我的队列上有个X可以点击,你的可能没有,但是还是可以点,也能取消,就是少了个X图标,这应该是这个版本的一个bug,解决办法:
打开uploadify.css, 查找"uploadify-queue-item", 我的是在73行,如下:
.uploadify-queue-item .cancel a {
background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height: 16px;
text-indent: -9999px;
width: 16px;
}
把url('../img/uploadify-cancel.png')这个改成url('uploadify-cancel.png'), 因为这个uploadify-cancel.png文件和css文件在同一个目录下,'../img/uploadify-cancel.png'找不到图片所以页面上没有X
5,当你选择的文件大小超出范围,uploadify会弹出提示,但提示是英文的,提示"The File..."什么的,解决办法是直接打开jquery.uploadify.js(你引得是jquery.uploadify.min.js就打开jquery.uploadify.min.js), 搜索"The File" 直接把相应英文替换为中文即可,反正提示什么英文你就搜什么呗,然后改, 注意清缓存,我清了好几遍才出来中文.
6.struts2的配置
这个不多说什么, 注意一点, 一定加上这个常量,不然超过2M的文件就传不了,队列里会报错
Http Error 404神马的
<constant name="struts.multipart.maxSize" value="2000000000" ></constant>
这是配置struts2限制的文件上传大小,value以字节为单位,2000000000大约是2G,
7.action代码
//三个接收文件的字段,与页面上的name,uploadify的'fileObjName'属性一致
private File uploadify;
private String uploadifyFileName;
private String uploadifyContentType;
//我是以当前时间+"__"+文件名作为新的文件名放到项目的videos文件夹中
public void uploadVideo() throws Exception{
ServletContext context = ServletActionContext.getServletContext();
String savePath = context.getRealPath("/videos");
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
String name = new Date().getTime()+"__"+uploadifyFileName;
savefile(uploadify,savePath,name,10485760);
uploadify.delete();//删除临时文件,tomcat的work目录下会有临时文件,得删掉
response.getWriter().print(name);//把新的文件名发回到页面,用个隐藏的input标签记下这个文件名,等页面提交的时候把这个文件名再带过来,加上路径,就是视频的路径存到数据库
}
//保存文件
public boolean savefile(File file, String path, String filename, int size) {
boolean bool = true;
try {
InputStream is = new FileInputStream(file);
OutputStream os = new FileOutputStream(path + "\\" + filename);
byte[] bytefer = new byte[size];
int length = 0;
while ((length = is.read(bytefer)) != -1) {
os.write(bytefer, 0, length);
}
os.close();
is.close();
} catch (Exception e) {
bool = false;
}
return bool;
}
到这里,就已经完成了视频的上传, 只不过上传完了, 我发现我传错了, 我想把刚才传的视频删了, 这个怎么搞了?我已经在js中留了两个回调函数,第一个回调函数就可以实现
第二个回调函数可以干嘛了?它是在所有文件传完了触发,所以利用它可以阻止下面这种情况:文件还正在上传,别人就要提交表单, 这时你应该提示文件正在上传,请稍后提交, 所以你可以再页面弄个隐藏的input,值是0, 然后在这个回调函数中将值改为1, 然后提交的时你就判断这个值, 是0就是还没传完,1就是传完了
- 大小: 19.4 KB
- 大小: 2.7 KB
- 大小: 4 KB
分享到:
相关推荐
这是根据uploadify3 2结合struts2搭建的文件上传环境 可以直接导入eclipse运行 每步实现基本都加了注释 以下是我碰到的问题: 1 判断session是否失效 本实例没测试这个问题 但在工作项目中碰到了 但原因在这里...
struts2 +jquey uploadify3 2 实现多文件上传 可以运行的myeclipse工程 绝对好用 访问方式http: 127 0 0 1:8080 Struts2Uploadify upload jsp uploadify 使用说明: <a href "javascript:$ "#file ...
UpLoadify3.2.1版本上传插件的实现demo,你值得拥有.zip
Uploadify-3.2.1 jQuery文件上传插件,使用uploadify组件可以实现异步无刷新多文件上传功能。
导入到eclipse或者myeclipse可以直接使用,uploadify插件的所以属性和方法都有详细说明,可以去掉注释测试,是用servlet处理的文件上传
Uploadify结合Struts2上传demo
此js解决jquery.uploadify.3.2.1 在IE9,IE10中 上传文件的按钮会无法点问题
Uploadify是一个易集成的多文件上传解决方案,在手册翻译时,3.2版目前最新。作为一个jQuery插件,Uploadify不仅使用简单而且可定制性非常强。
uploadify 文件异步上传 实现qq邮箱异步上传 0积分
文件包括Uploadify V3.2.1 上传文件报404 Not Found问题解决方法
uploadify V3.2.1上传插件,并且内含 404 Not Found问题的解决方法哦!
修复uploadify3.2.1初始化基于当前页面和uploadify.swf发送多次请求
Uploadify + Struts2 实现文件上传详解 有需要的看看
Uploadify3.2.1+Stream+PlUpload 三种批量上传控件(APS.NET) 。都测试通过了,方便大家学习
官网上下的,但很坑,经过两天查遍度娘谷哥,修复此版本人已用,目前暂未出现任何问题
利用struts2框架实现uploadidfy多文件上传,显示进度条上传
uploadify是一个JQuery插件,用于给网站实现文件上传功能,主要功能包括多个文件上传、拖放、实现进度指标、自定义上传限制、极端限制等
代码使用Struts2框架和uploadify插架实现多文件上传功能。
jquery.uploadify 3.2.1(目前最新)上传实例Demo,已 测试在IE、火狐、谷歌下可用。