Uploadify是JQuery的一个上传插件主要功能是批量上传文件
支持单文件或多文件上传，可控制并发上传的文件数
在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）
通过接口参数和CSS控制外观
引入uploadify的工具包
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/uplodify/uploadify.css" type="text/css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/uplodify/jquery.uploadify.min.js"></script>
<div id="attachs"></div> //进度条显示
<input type="hidden" id="fujianIds" name="ids"/> //上传后地址保存在数据库返回的id集合，
<input type="file" id="file_upload" name="userAttach"/>
<a href="javascrit:;" onclick="javascript:$('#file_upload').uploadify('upload','*')" class="button icon add">上传</a>
<a href="javascrit:;" onclick="javascript:$('#file_upload').uploadify('cancel', '*')" class="button icon add">取消上传</a>
<script type="text/javascript">
var v_attrchids= "";
$(document).ready(function() {
$("#file_upload").uploadify({
'auto':false,//是否自动上传
'successTimeout':99999, //超时时间上传成功后，将等待服务器的响应时间: 单位：秒
'formData':{
//附带值 JSON对象数据，将与每个文件一起发送至服务器端。如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值
},
'swf': "<%=request.getContextPath()%>/js/uplodify/uploadify.swf", //flash
'queueID':'uploadfileQueue',//文件选择后的容器div的id值
'fileObjName':'userAttach',//要上传的文件名称 要与后台Action的文件名(hereFile)保持一致
'uploader':'<%=request.getContextPath()%>/user/uploadFile.do',//上传地址
'buttonImage':'<%=request.getContextPath()%>/js/uplodify/background.jpg',//图片按钮
//浏览按钮的大小
'width':'150',
'height':'25',
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
'fileSizeLimit':'1000KB',//上传文件的大小限制允许上传文件的最大 大小单位(B, KB, MB, or GB)(0为没有限制)
'queueSizeLimit' : 3,//允许上传的文件的最大数量。
//选择上传文件后调用
'onSelect' : function(file) {
//alert("jljklj");
},
//返回一个错误，选择文件的时候触发
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
//检测FLASH失败调用
'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
//上传到服务器，服务器返回相应信息到data里
'onUploadSuccess':function(file, data, response){
var attach= eval("("+data+")");
v_attrchids += "," + attach.id;
$('#attachs').append('<span id="fujian_'+attach.id+'">'+'<img src=<%=request.getContextPath()%>'+attach.path+' height="50" width="50">'+'<a href="javascript:;" onclick="delFujian('+attach.id+');">删除</a></span>');
$("#fujianIds").val(v_attrchids);
},
//当单个文件上传出错时触发
'onUploadError': function (file, errorCode, errorMsg, errorString) {
// alert("上传失败");
// alert(文件 ["+file.name+"] + ' 上传失败: ' + errorString);
}
});
});
var basePath = "${ctx }";
document.write("<script type='text/javascript' "
+ "src='"+basePath+"/js/uploadify/jquery.uploadify-3.1.js?" + new Date()
+ "'></s" + "cript>");
</script>
后台处理
uploadify是基于ajax
private UserAttach userAttachDto =new UserAttach();
private String ids;
//上传文件 必须与前jsp页面中uploadify中参数 'fileObjName':'demo1' 保持一致
private File userAttach;
//文件名 命名规则 按照 上传文件+ FileName 会自动匹配相应文件名
private String userAttachFileName;
public void uploadFile(){
//獲取當前要上傳的路徑
String userAttachUrl = getServletContext().getRealPath(getProperty("uploadpath")); //上传地址
if(userAttach!=null){
String[] split = userAttachFileName.split("\\.");
String fileLastName=UUID.randomUUID().toString()+"pbw."+split[split.length - 1];
FileUtil.upFile(userAttach, fileLastName, userAttachUrl);
String Url=getProperty("uploadpath")+fileLastName;
userAttachDto.setUserAttachUrl(Url);
userAttachDto.setUserAttachName(fileLastName);
System.out.println(Url);
userService.insertUserAttach(userAttachDto);
int id = userAttachDto.getId();//
out("{\"id\":" + id + ",\"path\":\""+Url+ "\"}");
}
}