jQuery uploadify 3.2
苗疆三刀的随手记 2014-11-18
感谢原创 http://18810098265.iteye.com/blog/1972538
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插件,会有如下效果
这里有点小问题, 我的队列上有个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>
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就是传完了
