最近需要做一个批量上传图片的功能
用了很多方法,有的很复杂,有的没有成功
最后用了uploadify,去网上下了个最新的3.1版本,但是网上多数都是2.×的例子,已经有很多配置不一样了。
所以有下了个参考手册,一点点的配置,终于成功了。
参考手册地址,我的是不想要积分就可以下的,呵呵
http://download.csdn.net/detail/wjc1000/4342812
先把我的代码上了吧
呵呵,直接点
jsp的包含文件
<link rel="stylesheet" type="text/css" href="${kdt}/js/uploadify-v3.1/uploadify.css" />
<script type="text/javascript" src="${kdt}/js/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>
我看有的还有
<script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
但是我以前就引用了,所以就没有用,这个根据自己的情况来。
js代码
有些引用的路径需要根据自己的改下
例如
'swf' : '${kdt}/js/uploadify-v3.1/uploadify.swf',
$(function() {
$("#actpic").uploadify({
//是组件自带的flash,用于打开选取本地文件的按钮
'swf' : '${kdt}/js/uploadify-v3.1/uploadify.swf',
//服务器端 脚本文件路径
'uploader': 'activity_saveImage.html',
//取消上传文件的按钮图片,就是个叉叉
'cancel': '${kdt}/js/uploadify-v3.1/uploadify-cancel.png',
//和input的name属性值保持一致就好,Struts2就能处理了
'fileObjName' : 'formActivityInfo.actpic',
//按钮上的文字
'buttonText' : '选择图片',
//是否选取文件后自动上传
'auto': false,
//上传文件大小限制
'fileSizeLimit':'3024KB',
//同时上传的文件最大数
'queueSizeLimit':'10',
//调用后台action时传递的参数
'formData':{ 'actid':'${activityInfo.id}','userid':'${sessionScope.user.userid}' },
//有speed和percentage两种,一个显示速度,一个显示完成百分比
'displayData' : 'percentage',
//如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileTypeDesc' : '支持格式:jpg/gif/jpeg/png/bmp.',
//允许的格式
'fileTypeExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',
//显示待上传文件列表的div区域
'queueID':'file_queue',
//全部文件上传完触发(上传完成后,跳转的页面)
'onQueueComplete' : function(queueData) {
document.location.href = "activity_showActivity.html?actid=${activityInfo.id}&imgpage=${imgPageCtrl.currentPage}&interflowpage=${interPageCtrl.currentPage}&tabflag="+tabflag;
}
});
});
html代码
<div id="alertinfo">
<h4><span>上传图片</span><span id="close" onclick="closeAlert();">关闭</span></h4>
<p><input type="file" id="actpic" class="sub" name="formActivityInfo.actpic"/>
<input type="button" value="开始上传" class="sub" onclick="$('#actpic').uploadify('upload','*');"/>
</p>
<div id="file_queue"></div>
</div>
java代码
private File actpic;
private String actpicFileName;
private String imageUrl;
public String saveImage() throws Exception {
logger.info("ActivityAction-saveImage-begin");
try {
//取得参数 活动id
String actid = request.getParameter("actid")!=null?request.getParameter("actid"):"";
//用户id
String userid = request.getParameter("userid")!=null?request.getParameter("userid"):"";
Actpic paraActpic = new Actpic();
paraActpic.setActid(actid);
paraActpic.setApplyby(userid);
//保存图片,如果是可上传的文件类型
String fileUrl="";
if(UploadTools.isAllowUpload(formActivityInfo.getActpicFileName()))
{
fileUrl=UploadTools.uploadFile(formActivityInfo.getActpic(), formActivityInfo.getActpicFileName());
//生成缩略图
UploadTools.makeSmallPic(fileUrl,140,95,false);
}
paraActpic.setUrl(fileUrl);
//根据id取得活动信息
boolean returns = ServiceFactory.getActivityService().insertActpic(paraActpic);
if (!returns) {
logger.info("ActivityAction-saveImage-end_error");
return redirectToMsg("数据处理失败,请重新尝试!");
}
//取得tab页flag
String tabflag = request.getParameter("tabflag")!=null?request.getParameter("tabflag"):"1";
//取得tab页flag
String imgpage = request.getParameter("imgpage")!=null?request.getParameter("imgpage"):"1";
//取得tab页flag
String interflowpage = request.getParameter("interflowpage")!=null?request.getParameter("interflowpage"):"1";
//response.sendRedirect("activity_showActivity.html?actid="+actid +
// "&imgpage=" + imgpage + "&interflowpage=" + interflowpage+ "&tabflag=" + tabflag);
} catch(Exception e){
logger.info("ActivityAction-saveImage-end-error");
return redirectToMsg("数据处理失败,请重新尝试!");
}
logger.info("ActivityAction-saveImage-end");
return showActivity();
}
上面就是所有的代码了
有些代码是多余的,还没有及时删除,但是不多,根据自己的要求改改吧。
下面加一些配置项的说明,呵呵,网上找的,我就是结合参考手册和下面的内容弄出来的
auto:Input Type Boolean,是否自动上传,默认true;
buttonClass:Input Type String, uploadify按钮上添加的样式名称;
buttonCursor:Input Type String,鼠标移上去时的鼠标手势,有'hand'和'arrow'两个选项;
buttonImage:Input Type String,按钮背景图片;
buttonText:Input Type String,按钮文字片;
checkExisting:Input Type String,是否检查文件是否已经被上传;
debug:Input Type Boolean,是否进入调试模式,默认false;
fileObjName:Input Type String,后台表单接受的名称,默认Filedata;
fileSizeLimit:Input Type Number,上传的文件大小,接受单位为B, KB, MB, or GB的数字,默认单位为KB,设置成0表示无限制,'fileSizeLimit' : '100KB';
fileTypeDesc:
fileTypeExts:Input Type String,允许的文件后缀,(i.e. ‘*.jpg; *.png; *.gif’).;
formData:Input Type JSON Object,要传递的其它参数;
height:Input Type Number,按钮高度;
method:Input Type String,上传的方式,post或者get,默认post;
multi:Input Type Boolean,是否允许多文件上传,默认true;
overrideEvents:
preventCaching:
progressData:Input Type String,当上传的时候,显示的内容,有‘percentage’ or ‘speed’两个选项,即显示百分比或显示上传速度;
queueID:Input Type String,上传文件的队列ID;
queueSizeLimit:Input Type Number,一次可以上传的文件数量,默认999;
removeCompleted:Input Type Boolean,是否移除已完成的文件,默认true;
removeTimeout:Input Type Number,已完成文件的移除延迟时间,默认3;
requeueErrors:
successTimeout:Input Type Number,等待服务器处理文件的时间,默认30s,当超过时,就认为文件已经正确上传;
swf:Input Type String,uploadify.swf的路径,默认'uploadify.swf';
uploader:Input Type String,服务端处理脚本,默认'uploadify.php';
uploadLimit:Input Type Number,上传的最大数量,默认999;
width:Input Type Number,按钮宽度,默认120;
那些事件:
onCancel:当一个文件从队列中移除时触发;
onClearQueue:当清空队列时触发;
onDestroy:当调用destroy时触发;
onDialogClose:当对话框关闭时触发;
onDialogOpen:当对话框打开时触发;
onDisable:当uploadify实例被调用disable方法时触发;
onEnable:当uploadify实例被调用enable方法时触发;
onFallback:
onInit:实例被初始化时触发;
onQueueComplete:队列完成时触发;
onSelect:当选择某一文件时触发;
onSelectError:当选择文件,发生错误时触发;
onSWFReady:当falsh boject加载完毕时触发;
onUploadComplete:当文件(单个)上传成功时触发,不管成功还是失败;
onUploadError:当上传单个发生错误时触发;
onUploadProgress:上传过程中触发;
onUploadStart:
onUploadSuccess:当每一个文件上传成功时触发
|