最近需要实现文件的批量上传,找了些,终于发现了一个比较不错的。Uploadify是一个Jquery框架下处理批量文件上传的插件,支持多种服务器端软件。在网上也能找到很多的相关例子,很多地方他们说的都不一样,按照那些例子的配置,我没有实现功能。最后一番纠结终于实现了功能。下面就来介绍一下:
HTML
需要的资源,这些都可以从网上下得到,具体不再赘述。
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />
关键代码:
这里是将body里的文件上传控件绑定到uploadify
<script type="text/javascript">
$(document).ready(function() {
$("#uploadFile").uploadify({
/*注意前面需要书写path的代码*/
'swf' : 'uploadify/uploadify.swf',
'uploader' : 'uploadUtil.action', 请求的Action
'cancelImg' : 'uploadify/cancel.png',
'method' : 'get',
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
'fileObjName' : 'uploadFile',//和input的name属性值保持一致就好,Struts2就能处理了
'auto' : false, //是否自动开始
'multi' : true, //是否支持多文件上传
'buttonText' : 'Browse', //按钮上的文字
'simUploadLimit' : 20, //一次同步上传的文件数目
'sizeLimit' : 19871202, //设置单个文件大小限制
// 'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
// 'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
'queueSizeLimit' : 10, //限制在一次队列中的次数(可选定几个文件)。默认值= 999,而一次可传几个文件有 simUploadLimit属性决定。
'fileSizeLimit' : 50*1024*1024, //设置单个文件大小限制,单位为byte ,50M
'removeCompleted': true,
'removeTimeout' : 0.5,
'requeueErrors' : true,
// 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal,queueBytesLoaded) {
// $("#result").append("<div>文件\""+file.name+"\"共"+totalBytesTotal+"字节,已上传"+totalBytesUploaded + "字节!</div><br/>");
// if(totalBytesUploaded==totalBytesTotal){
// $("#result").append("<div>文件\""+file.name+"\"上传成功!</div><br/>");
// }
// },
'onUploadComplete' : function(file) {
// $("#result").append("<div>文件"+file.name+"上传成功!</div><br/>");
},
// 'onUploadSuccess' : function(file,data,response) {
// alert(data);
// var retdata=eval("(" + data + ")");
// alert(retdata.msg);
//提示消息
// $("#result").append("<div>"+retdata.msg+"</div><br/>");
// },
'onUploadError' : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
$("#result").html(errorString);
},
});
});
</script>
Body的代码很干净
<body>
<input type="file" name="uploadFile" id="uploadFile" />
<div id="fileQueue"></div>
<a href="javascript:$('#uploadFile').uploadify('upload','*')">上传文件</a>
<a href="javascript:$('#uploadFile').uploadify('cancel', '*')">取消所有上传</a>
</body>
struts配置
<struts>
<package name="commonutil" extends="struts-default">
<action name="uploadUtil" class="XXXX.UploadUtilAction" method="uploadFile">
</action>
</package>
</struts>
Action代码
public class UploadUtilAction {
private File uploadFile; //名字要和前面js里的 'fileObjName'名字一致
private String uploadFileFileName; //上传来的文件的名字
private String msg;
public String uploadFile() throws Exception {
try {
String extName = "";
String newFileName = "";
if (uploadFileFileName.lastIndexOf(".") >= 0) {
extName = uploadFileFileName.substring(uploadFileFileName
.lastIndexOf("."));
}
File targetFile = new File("f:/", uploadFileFileName);
FileUtils.copyFile(uploadFile, targetFile);
msg = "文件上传成功";
} catch (Exception e) {
msg = "文件上传失败!";
e.printStackTrace();
}
return null;
}
public File getUploadFile() {
return uploadFile;
}
public void setUploadFile(File uploadFile) {
this.uploadFile = uploadFile;
}
public String getUploadFileFileName() {
return uploadFileFileName;
}
public void setUploadFileFileName(String uploadFileFileName) {
this.uploadFileFileName = uploadFileFileName;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
这样就可以实现文件批量上传了,效果还是不错的。带进度条的上传控件。。