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>&nbsp;  
			        <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();
              					}
                              }
                        }
                    }
                }
            }  
        }
	}

你可能感兴趣的:(多文件上传)