多文件上传有时候要求带进度条显示,现在我就和大家分享一款这样的插件uploadify。
首先先到官网下载最新的zip压缩包http://www.uploadify.com。
下载完解压后将解压后的文件夹拷贝到项目中,然后开始进行配置
jsp页面的配置:
<!--装载文件-->
<link href="uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<!--ready事件-->
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader':'Uploadfile',
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
'auto' : false, //是否自动开始
'multi': true, //是否支持多文件上传
'buttonText': 'BROWSE', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目'fileSizeLimit' : '6000KB',//限制的大小要转换成KB否则容易报错,这里是总共的大小,不是单个文件的
'queueSizeLimit' : 10, //队列中同时存在的文件个数限制
'fileTypeExts': '*.*',//允许的格式
'fileTypeDesc': '所有文件', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'onUploadSuccess': function ( fileObj, response, data) {
alert("文件:" + fileObj.name + "上传成功");
},
'onUploadError': function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});</script>
<body>
<fieldset><legend><font color="red">文件列表</font></legend>
<div id="fileQueue" style="width:30%"></div>
</fieldset>
<input type="file" name="uploadify" id="uploadify" /><p>
<a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>
</body>
好了页面配置完了,还有要注意一点记得将uploadify.css中的.uploadify-queue-item .cancel a这个样式的图片url改成background: url('../uploadify/uploadify-cancel.png') 0 0 no-repeat;否则文件后面的图片就显示不出来。
后台servlet代码:
//文件保存目录路径
String savePath = this.getServletConfig().getServletContext().getRealPath("/upload/");
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
// 创建磁盘文件工厂
FileItemFactory fac = new DiskFileItemFactory();
// 创建servlet文件上传组件
ServletFileUpload upload = new ServletFileUpload(fac);
//使用utf-8的编码格式处理数据
upload.setHeaderEncoding("utf-8");
// 文件列表
List fileList = null;
// 解析request从而得到前台传过来的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}
// 遍历从前台得到的文件列表
Iterator itr = fileList.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
// 如果不是普通表单域,当做文件域来处理
if (!item.isFormField()) {
try {
File uploadedFile = new File(savePath, fileName);
item.write(uploadedFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 这个地方不能少,否则前台得不到上传的结果
out.write("1");
out.close();