uploadify是一款用于上传文件的JQuery插件,使用它在选择文件后有一个进度条用于显示用户选择了什么文件。
使用方法
1.引入资源文件
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify-3.2.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
2.创建一些HTML元素便于使用uploadify(id为queue的div的作用是 显示用户选择的文件列表,并提供一个进度条,当用户选择上传时即可根据进度条查看文件上传的程度,值之所以要为queue,是因为在调用type=file的uploadify方法时传入的"queueID"的值是"queue")
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true" />
<a href="javascript:$('#file_upload').uploadify('upload')">开始上传</a>
<a href="javascript:$('#file_upload').uploadify('cancel')">取消所有上传</a>
3.写一些JQuery代码$(function() {
var timestamp = new Date().getTime();
$('#file_upload').uploadify({
'formData' : {
'timestamp' : timestamp,
'token' : 'unique_salt' + timestamp
},// 设置想后台传递的参数 如果设置该参数,那么method应该设置为get,才能得到参数
'swf' : 'js/uploadify/uploadify.swf',// 指定swf文件
'uploader' : 'url',// 后台处理的页面
'cancelImg' : 'js/uploadify/uploadify-cancel.png',// 取消按钮图片路径
"queueID" : 'queue',// 上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
'method' : 'get',// 设置上传格式
'auto' : false,// 当选中文件后是否自动提交
'multi' : false,// 是否支持多个文件上传
'removeCompleted':false,
'buttonText' : '选择文件',// 按钮显示的文字
uploadLimit:1,
fileObjName:'uploadfile',//这个文件对象的name为uploadfile
fileSizeLimit:1024 * 10,
'onUploadSuccess': function (file, data, response) {// 上传成功后执行
/* $('#' + file.id).find('.data').html(' 上传完毕');*/
console.log(file);
}
});
});
4.上面一段JS代码的作用是初始化uploadify的一些参数,当设置好了这些参数后,再调用uploadify的一些方法即可使用
5.下面提供一段java后台代码
// 获得参数
String timestamp = request.getParameter("timestamp");
String token = request.getParameter("token");
System.out.println(timestamp);
System.out.println(token);
// 获得文件
String savePath = this.getServletConfig().getServletContext()
.getRealPath("");
savePath = savePath + "/uploads/";
File f1 = new File(savePath);
System.out.println(savePath);
if (!f1.exists()) {
f1.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
System.out.println(ex.getMessage());
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println(size + " " + type);
if (name == null || name.trim().equals("")) {
continue;
}
// 扩展名格式:
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 生成文件名:
name = UUID.randomUUID().toString();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
response.getWriter().print(name + extName);
6.本人使用过程中遇到过的错误
- 使用Chrome时,uploadify插件出现错误,错误原因是Chrome的Flash过期了或者Chrome版本过高
- 小demo一直未能成功,不是代码的问题,而是浏览器的问题,更换浏览器试试。
- uploadify有许多属性,方法,事件,请另行查阅资料。