uplodify 3.2.1 多文件上传组件使用说明


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<c:url value="/resources/css/themes/icon.css" />" rel="stylesheet" type="text/css"/>
<link href="<c:url value="/resources/css/themes/default/easyui.css" />" rel="stylesheet" type="text/css"/>
<link href="<c:url value="/resources/css/sysbase.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/css/tablecloth.css"/>" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/css/uploadify.css"/>" rel="stylesheet" type="text/css" />
<script src="<c:url value="/resources/js/jquery-1.9.1.js"/>" type="text/javascript" ></script>
<script src="<c:url value="/resources/js/jquery.tablesorter.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery.easyui.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/xuejiadminCenter.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/validateboxextendsrules.js"/>" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery.uploadify.js"/>" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#uploadify").uploadify({
'debug' : false,
'uploader' : '${pageContext.request.contextPath}/xuejiadmin/importStuPictures.html ;jsessionid=<%=session.getId()%>',
'swf' : "<c:url value="/resources/js/uploadify.swf" />?" + Math.random(),
'cancelImg' : "<c:url value="/resources/images/uploadify-cancel.png" />",
// 'folder' : 'uploads',//您想将文件保存到的路径
'queueID' : 'fileQueue',//与下面的id对应
'queueSizeLimit' : 5,
'fileTypeDesc' : 'jpg文件或png文件或jpeg文件',
'fileTypeExts' : '*.jpg;*.png;*.jpeg;*.JPG;*.gif', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
'auto' : false,
'multi' : true,
// 'simUploadLimit' : 2,
'fileSizeLimit' : '2MB',
'buttonText' : '选择学生照片',
'successTimeout' : 9999, // 超时时间
//服务器端脚本使用的文件对象的名称 $_FILES个['upload']
'fileObjName':'upload',
//浏览按钮的宽度
'width':'100',
//浏览按钮的高度
'height':'32',
//'onDialogOpen' : function() {//当选择文件对话框打开时触发
// alert( 'Open!');
// },
/* 'onSelect' : function(file) {//当每个文件添加至队列后触发
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus);
}, */
'overrideEvents': ['onSelectError', 'onDialogClose'],
'onSelectError' : function(file,errorCode,errorMsg) {//当文件选定发生错误时触发
switch(errorCode) {
case -100:
$.messager.alert("错误信息", "上传的文件数量已经超出系统限制的"+$('#uploadify').uploadify('settings','queueSizeLimit')+"个文件!", "error");
break;
case -110:
$.messager.alert("错误信息","文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小!", "error");
break;
case -120:
$.messager.alert("错误信息","文件 ["+file.name+"] 大小异常!", "error");
break;
case -130:
$.messager.alert("错误信息","文件 ["+file.name+"] 类型不正确!", "error");
break;
}
},
/* 'onDialogClose' : function(swfuploadifyQueue) {//当文件选择对话框关闭时触发
if( swfuploadifyQueue.filesErrored > 0 ){
alert( '添加至队列时有'
+swfuploadifyQueue.filesErrored
+'个文件发生错误n'
+'错误信息:'
+swfuploadifyQueue.errorMsg
+'n选定的文件数:'
+swfuploadifyQueue.filesSelected
+'n成功添加至队列的文件数:'
+swfuploadifyQueue.filesQueued
+'n队列中的总文件数量:'
+swfuploadifyQueue.queueLength);
}
}, */
'onQueueComplete' : function(stats) {//当队列中的所有文件全部完成上传时触发
$.messager.alert('提示信息', '成功上传的文件数: ' + stats.uploadsSuccessful
+ ' - 上传出错的文件数: ' + stats.uploadsErrored
+ ' - 取消上传的文件数: ' + stats.filesCancelled
+ ' - 出错的文件数' + stats.filesErrored, 'info');
},
//检测FLASH失败调用
'onFallback' : function(){
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
/* 'onUploadComplete' : function(file,swfuploadifyQueue) {//队列中的每个文件上传完成时触发一次
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus);
}, */
'onUploadError' : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上传文件出错是触发(每个出错文件触发一次)
alert( 'id: ' + file.id
+ 'onUploadError '
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus
+ ' - 错误代码: ' + errorCode
+ ' - 错误描述: ' + errorMsg
+ ' - 简要错误描述: ' + errorString);
},
/* 'onUploadProgress' : function(file,fileBytesLoaded,fileTotalBytes,queueBytesLoaded,swfuploadifyQueueUploadSize) {//上传进度发生变更时触发
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus
+ ' - 当前文件已上传: ' + fileBytesLoaded
+ ' - 当前文件大小: ' + fileTotalBytes
+ ' - 队列已上传: ' + queueBytesLoaded
+ ' - 队列大小: ' + swfuploadifyQueueUploadSize);
},
'onUploadStart': function(file) {//上传开始时触发(每个文件触发一次)
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus );
},
'onUploadSuccess' : function(file,data,response) {//上传完成时触发(每个文件触发一次)
alert( 'id: ' + file.id
+ ' - 索引: ' + file.index
+ ' - 文件名: ' + file.name
+ ' - 文件大小: ' + file.size
+ ' - 类型: ' + file.type
+ ' - 创建日期: ' + file.creationdate
+ ' - 修改日期: ' + file.modificationdate
+ ' - 文件状态: ' + file.filestatus
+ ' - 服务器端消息: ' + data
+ ' - 是否上传成功: ' + response);
} */
});
});
</script>
</head>

<body>
<!--------------middle main content--------------------->
<div class="content">
<div class="location_bar">
<div >
<ul>
<li><a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:' icon-chevron-right'">所在位置:</a></li>
<li><a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:' icon-chevron-right'">学生信息管理</a></li>
<li><a id="stu_postion" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:' icon-chevron-right'">同步学生照片</a></li>
</ul>
</div>
<div class="line"></div>
</div>
<!-- ----- the different info----- -->
<div class="content_info" id="content_info">
<div style="margin:15px;margin-top:25px;">
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
</div>
<p style="margin-top:20px;">
<!-- 上传第一个未上传的文件 -->
<a href="javascript:$('#uploadify').uploadify('upload')" class="easyui-linkbutton">上传照片</a>
<!-- 取消第一个未取消的文件 -->
<a href="javascript:$('#uploadify').uploadify('cancel')" class="easyui-linkbutton">取消上传</a>

<a href="javascript:$('#uploadify').uploadify('upload','*')" class="easyui-linkbutton">开始上传所有照片</a> 
<a href="javascript:$('#uploadify').uploadify('cancel','*')" class="easyui-linkbutton">取消所有上传</a>
</p>
</div>
</div>
</body>
</html>


@RequestMapping(value = "/importStuPictures.html")
public void importStuPicture(HttpServletRequest request, HttpServletResponse response) {

String photo_path = PhotoUtils.getPhotoPath();
String photo_upload_path = PhotoUtils.getUploadPhotoPath();
//logger.info(photo_upload_path);

DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List<FileItem> fileList = null;

try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
logger.info("FileUploadException");
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String stuID = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();

if (!StringUtils.isEmpty(name)) {
// 扩展名格式:
if (name.lastIndexOf(".") >= 0) {
stuID = name.substring(0, name.lastIndexOf("."));

if (isExistStudentID(stuID)) {
logger.info("stuID " + stuID);
// File file = new File(photo_upload_path + name);
//if (file.exists()) {
// return;
// }
File saveFile = new File(photo_upload_path + name);

try {
item.write(saveFile);
this.studentService.UpdateStudentPhoto(stuID, photo_path + name);
response.getWriter().write("true");
} catch (Exception e) {
logger.info("save photo error.");
e.printStackTrace();
try {
response.getWriter().write("false");
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
}
}
}
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值