JQUERY + UPLOADFY 上传图片并刷新-CSDN博客

本文链接：https://blog.csdn.net/kuaileren003/article/details/8600338

	//保存照片
	@RequestMapping(params = "method=savePictureinfo")
	public String savePictureinfo(HttpServletRequest request) throws Exception {
		String idcard = request.getParameter("idcard");
		String basename = request.getParameter("name");
		String selectptId = request.getParameter("selectptId");
		String archive_code = request.getParameter("archive_code");
		request.setAttribute("archive_code", archive_code);
		request.setAttribute("idcard", idcard);
		request.setAttribute("name", basename);
		
		selectptId = "0" ;
		
		 CommonsMultipartResolver commonsMultipartResolver = new   CommonsMultipartResolver(request.getSession().getServletContext());  
		 commonsMultipartResolver.setDefaultEncoding("utf-8");              
		 if (commonsMultipartResolver.isMultipart(request)) {       
			 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;      
			 Iterator<String> iter = multipartRequest.getFileNames();
			 while (iter.hasNext()) {             
				 MultipartFile file = multipartRequest.getFile((String) iter.next());       
				 if (file != null) {                 					
					String fileName =  file.getOriginalFilename();
					String filetype ="1";
					if(fileName.indexOf("jpg") != -1 || fileName.indexOf("jpeg")!= -1){
						filetype ="2";
					}else if(fileName.indexOf("doc") != -1  ){
						filetype ="3";
					}
					String savePath = request.getRealPath("/") + "WEB-INF/upload/";
					File f1 = new File(savePath);
					if (!f1.exists()) {
					    f1.mkdirs();
					}
				 String path = savePath + fileName;               
                 //System.out.println(path);
				 //上传到服务器              
				 File localFile = new File(path); 
				 file.transferTo(localFile);         
	 
				  try {
			            byte[] bytes1 = getBytes(path);
						
						Pictureinfo obj = this.pictureinfoService.getPictureinfoByAr(archive_code, selectptId);
						if(obj!=null){
							obj.setArchive_code(archive_code);
							obj.setFilename(fileName);
							obj.setFiletype(filetype);
							obj.setPointid(Integer.parseInt(selectptId));
							obj.setUpcontent(bytes1);
							obj.setTxtcontent("");
							obj.setUptime(new Date());
							obj.setRemark(file.getContentType());
							this.pictureinfoService.updatePictureinfo(obj);
						}else{
							obj = new Pictureinfo();
							obj.setArchive_code(archive_code);
							obj.setFilename(fileName);
							obj.setFiletype(filetype);
							obj.setPointid(Integer.parseInt(selectptId));
							obj.setUpcontent(bytes1);
							obj.setTxtcontent("");
							obj.setUptime(new Date());
							obj.setRemark(file.getContentType());
							this.pictureinfoService.savePictureinfo(obj);
						}
						request.setAttribute("statusCode", "200");
						request.setAttribute("message", "{firstParam:'"+obj.getId()+"'}");
						 
						//删除临时文件
						localFile.delete();  
			            
			        } catch (Exception e) {
			            e.printStackTrace();
			        }	
				 
				 }
			 }
		 }
		
		 
		return "sas/ajaxDone";
	}

 
 
<LINK href="<%=request.getContextPath()%>/admin/themes/default/client.css"	type=text/css rel=stylesheet>
<LINK href="<%=request.getContextPath()%>/admin/themes/default/sas.css"	type=text/css rel=stylesheet>
<link href="<%=request.getContextPath() %>/thirdparty/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/admin/javascripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/ListcodeService.js"> </script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/SpecialGroupService.js"> </script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/SubjectService.js"> </script>
<script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/thirdparty/datepicker/WdatePicker.js"></script>
<script src="<%=request.getContextPath() %>/thirdparty/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	document.getElementById("hidpic").style.display = 'none';
	dwr.engine.setAsync(false);
	
	//行政职务
	ListcodeService.getListByTypeId("chieftitle",function(retlst){
		var listHtml="";
		var tableElement = $("#chieftitle");
		var chieftitleid =  "${bean.chieftitle}";
		for(var i=0;i<retlst.length;i++){
    		listcode=retlst[i];
    		var select="";
			if(listcode.labelvalue == chieftitleid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
		
	});
	
	SubjectService.getSubjectByDepth(2,function(retlst){
		var listHtml="";
		var tableElement = $("#chargedepartment");
		var chargedepartment =  "${bean.chargedepartment}";
		tableElement.empty();
		tableElement.append("<option  value=''>-请选择-</option>");
		for(var i=0;i<retlst.length;i++){
    		subject=retlst[i];
    		var select="";
			if(subject.code == chargedepartment ){	select="selected";} 
    		listHtml = "<option  value=\'"+subject.code+"\'"+select+">"+subject.name+"</option>";
    		tableElement.append(listHtml);
		}
		
	});
	
	//现专业技术职称
	ListcodeService.getListByTypeId("zhicheng",function(retlst){
		var listHtml="";
		var tableElement = $("#zhicheng");
		var zhichengid =  "${bean.zhicheng}";
		for(var i=0;i<retlst.length;i++){
    		listcode=retlst[i];
    		var select="";
			if(listcode.labelvalue == zhichengid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
		
	});
	//专业组
	SpecialGroupService.getSpecialGroupList(function(retlst){
		var listHtml="";
		var tableElement = $("#groupid");
		var groupid =  "${bean.groupid}";
		for(var i=0;i<retlst.length;i++){
    		specialgroup=retlst[i];
    		var select="";
			if(specialgroup.groupcode == groupid ){	select="selected";} 
    		listHtml = "<option  value=\'"+specialgroup.groupcode+"\'"+select+">"+specialgroup.groupname+"</option>";
    		tableElement.append(listHtml);
		}
		
	});
	
	//性别
	ListcodeService.getListByTypeId("sex",function(retlst){
		var listHtml="";
		var tableElement = $("#sex");
		var sexid =  "${bean.sex}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == sexid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});
	
	
	//原学历
	ListcodeService.getListByTypeId("oldeducation",function(retlst){
		var listHtml="";
		var tableElement = $("#oldeducation");
		var oldeducationid =  "${bean.oldeducation}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == oldeducationid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});
	//最高学历
	ListcodeService.getListByTypeId("neweducation",function(retlst){
		var listHtml="";
		var tableElement = $("#neweducation");
		var neweducationid =  "${bean.neweducation}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == neweducationid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});
	//最高学历学制学位
	ListcodeService.getListByTypeId("neweducationyears",function(retlst){
		var listHtml="";
		var tableElement = $("#neweducationyears");
		var neweducationyearsid =  "${bean.neweducationyears}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == neweducationyearsid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});
	//原学历学制
	ListcodeService.getListByTypeId("oldeducationyears",function(retlst){
		var listHtml="";
		var tableElement = $("#oldeducationyears");
		var oldeducationyearsid =  "${bean.oldeducationyears}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == oldeducationyearsid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});
	
	
	//破格情况
	ListcodeService.getListByTypeId("exceptionalinfo",function(retlst){
		var listHtml="";
		var tableElement = $("#exceptionalinfo");
		var exceptionalinfoid =  "${bean.exceptionalinfo}";
		for(var i=0;i<retlst.length;i++){
			listcode=retlst[i];
			var select="";
			if(listcode.labelvalue == exceptionalinfoid ){	select="selected";} 
    		listHtml = "<option  value=\'"+listcode.labelvalue+"\'"+select+">"+listcode.labeltext+"</option>";
    		tableElement.append(listHtml);
		}
	});

	 
	dwr.engine.setAsync(true);
	 
	 $("#photo_file").uploadify({
        'swf'      :'<%=request.getContextPath() %>/thirdparty/uploadify/uploadify.swf',
        'uploader' :'<%=request.getContextPath() %>/clientBaseinfo.do?method=savePictureinfo&archive_code=<%=archive_code %>',
        'auto'          : true, 
        'fileSizeLimit' : '100KB',
         'fileTypeDesc' : 'Image Files',
         'fileTypeExts' : '*.gif; *.jpg; *.png',
         buttonText:'请选择文件',
         'onUploadSuccess' : function(file, data, response) { 
        	 var obj = jQuery.parseJSON(data);                 
             var dataObj=eval("("+obj.message+")");
             //alert("firstParam = "+dataObj.firstParam);
             $("#photo").attr("src","<%=request.getContextPath()%>/servlet/ShowPictureServlet?id="+dataObj.firstParam+"&<%=Math.random()%>");
          },
		  'onQueueComplete' : function(queueData) {    
		 }
    });
   });
   
   
    function _birthChange(birth){//计算年龄
      return ;
      if(birth != "" && birth.length >4 ){
    	var iYear = new Date().getFullYear();
    	var age = iYear - birth.substr(0,4);
    	$("#age").val(age);
      }
    }
    
    function _ZhichengChange(zhicheng_year){//计算现职称任职年限
    	return ;
    	if(zhicheng_year != "" && zhicheng_year.length >4 ){
        	var iYear = new Date().getFullYear();
        	var age = iYear - zhicheng_year.substr(0,4);
        	$("#engage_years").val(age);
          }
    }
    
    function _idcardChange(idcard){
    	return ;
    	if(idcard == "" )  return ;
    	if ( idcard.length == 18 ){
    		var birth  =idcard.substr(6,4)+idcard.substr(10,2)+idcard.substr(12,2);
        	var iYear = new Date().getFullYear();
        	var age = iYear - idcard.substr(6,4);
        	$("#birth").val(birth);
        	$("#age").val(age);
         }else if(idcard.length ==15 ){
        	 var birth  ='19'+idcard.substr(6,2)+idcard.substr(8,2)+idcard.substr(10,2);
         	var iYear = new Date().getFullYear();
         	var age = iYear - ('19'+idcard.substr(6,2));
         	$("#birth").val(birth);
         	$("#age").val(age);
         }
    }

    function laststep(){
  	  document.panelForm.action = "<%=request.getContextPath()%>/clientBaseinfo.do?method=viewPanel";
	  document.panelForm.submit();
       //window.history.go(-1);
    }
    function nextstep(){
   
    	  	
    	var photo=document.getElementById("photo").name;
		 if(photo=="photo"){		     
			 if(!chk()){
			     return false;
			 }
		 }	
		 */
		 var check = 0;
		  for (var j=1;j<=i;j++){
			 if ( $("#start_time_"+j).val()!=""){
				   check++;
				   if( $("#company_"+j).val()==""){
						 alert("请输入完整的工作履历或删除多余的!");return false;
						 }
			   }
		  
		  }
		 if (check == 0){
			 alert("主要工作履历不能为空!");return false;
			 } 
       document.panelForm.submit();
	}
    
    function setImagePreview() {
    	var docObj=document.getElementById("photo_file");

    	var imgObjPreview=document.getElementById("photo");
    	if(docObj.files &&docObj.files[0]){
    			//火狐下，直接设img属性
    			imgObjPreview.style.display = 'block';
    			imgObjPreview.style.width = '300px';
    			imgObjPreview.style.height = '120px';                    
    			//imgObjPreview.src = docObj.files[0].getAsDataURL();
    	
    	//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
    	imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    	
    	}else{
    			//IE下，使用滤镜
    			docObj.select();
    			var imgSrc = document.selection.createRange().text;
    			var localImagId = document.getElementById("localImag");
    			//必须设置初始大小
    			localImagId.style.width = "110px";
    			localImagId.style.height = "152px";
    			//图片异常的捕捉，防止用户修改后缀来伪造图片
    			try{
    					localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    					localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    			}catch(e){
    					alert("您上传的图片格式不正确，请重新选择!");
    					return false;
    			}
    			imgObjPreview.style.display = 'none';
    			
    			document.selection.empty();
    			//将照片存到数据库
    			//document.pictureForm.submit();
    			//navTab.reload("<%=request.getContextPath()%>/clientBaseinfo.do?method=savePictureinfo&archive_code=<%=archive_code %>&idcard=<%=idcard%>&name=<%=name%>","archive_code:'<%=archive_code%>'", <%=archive_code%>);
    			
    	}
    	return true;
    }
 
    
    function calhw(){
    	var picw = dwr.util.getValue("picw");
    	var pich = dwr.util.getValue("pich");
    	if (picw>0){
    		hw=pich/picw
    		if (hw.length>4){hw=hw.substr(0,4)}
    		dwr.util.setValue("picwh","1:"+hw);
    	}else{
    		dwr.util.setValue("picwh","");
    	}
    }

    function setwh(){
    	//$("showpic").style.visibility="hidden";
    	dwr.util.setValue("picw",$("photo").width);
    	dwr.util.setValue("pich",$("photo").height);
    	setTimeout('calhw()',500);
    }

    
    var i = 3;
    
    $(".lj").live("click",function (){
    	  //删除
    	 $(this).parent().parent().remove();
   });
    
    function add() {
    i++;
    var content= '<tr> ' 
	+ '        <td height=\'8\' align=\'center\' width=\'10%\'><input name=\'start_time_'+i+'\' id=\'start_time_'+i+'\' '
	+ ' onFocus=\"WdatePicker({dateFmt:\'yyyyMMdd\',readOnly:true,minDate:\'1911-01-01\',maxDate:\'2049-12-31\'})\"  '
	+ '	     type=\'text\' class=\'date\'   size=\'10\' /></td> '
	+ '	    <td height=\'8\' align=\'center\' width=\'10%\'><input name=\'end_time_'+i+'\' id=\'end_time_'+i+'\' '
	+ ' onFocus=\"WdatePicker({dateFmt:\'yyyyMMdd\',readOnly:true,minDate:\'1911-01-01\',maxDate:\'2049-12-31\'})\" '
	+ '	     type=\'text\'  class=\'date\'   size=\'10\'  /></td> '
	+ '	    <td height=\'8\' align=\'left\' valign=\'middle\' >'
	+ '<input name=\'company_'+i+'\'  id=\'company_'+i+'\'   type=\'text\' size=\'70%\'  /> '
	+ '	 <a href=\'#\' class=\'lj\'>删除</a>     '
	+ '	 <a href=\'#\' οnclick=\'add()\'>添加</a></td> '
	+ '	  </tr> ';
    $('#workpaper').append(content);   
    //var addid = "add"+i;
    //alert(addid);
    //document.getElementById(addid).display = 'none';

    }
   
</script>
</head>
<% Baseinfo baseinfo = (Baseinfo) request.getAttribute("clientlogin");%>
<body>
    <div align="center" id="hidpic">
		<form id="pictureForm" name="pictureForm" action="<%=request.getContextPath() %>/clientBaseinfo.do?method=savePictureinfo" method="post">
		</form>
    </div>
	<!-- 页头LOGO部分 -->
	<div id="header">
		<jsp:include page="../include/top.jsp"></jsp:include>
	</div>

	<!-- 页正文部分  -->
	<div id="content">
		<div id="top_con"></div>
		<div id="content_con">
		    <div align="center" >
		      <table  height="40" border="0" cellpadding="0" cellspacing="0">
                      <tr class="f1" valign="middle">
                        <td  ><font color="#666666"> 网上报名向导：</font></td>
                        <td ><font color="#666666" > 1.网上注册→</font></td>
                        <td ><font color="#666666" > 2.登录成功→</font></td>
                        <td ><font color="#FF0000" > 3.填写信息→</font></td>
                        <td ><font color="#666666" > 4.上传资料→</font></td>
                        <td ><font color="#666666" > 5.审核通过打印通知单→</font></td>
                        <td ><font color="#666666" > 6.网报结束</font></td>
                      </tr>
                </table>
		   </div>
		   
		   <div align="center">
		   <form id="panelForm" name="panelForm" action="<%=request.getContextPath() %>/clientBaseinfo.do?method=saveBaseinfo" method="post">
		    <table width="95%" align="center" border="2" cellpadding="0" cellspacing="1" bordercolor="#8EC9F9" style="border-collapse: collapse;">
			   <tr>
			       <td height="25" colspan="3" align="left" ><font class="titles">  3.填写基本信息：</font></td>
			   </tr>

			    <tr >
					<td height="27" align="right" class="f1" width="30%">
						<div align="right">工号：</div>
					</td>
					<td height="27" class="f1">
						<div align="left"><input name="archive_code" id="archive_code"  type="text" readonly="readonly"  maxlength="14" size="30" value="${bean.archive_code }"/>
						<input name="id" id="id"  type="hidden"  size="30" value="${bean.id }"/>

						</div>
					</td>
					
					<td width="10%" height="156"  rowspan="10" class="f1"><div align="left">
                       <table id="upic">
                         <tr>
                           <td align="center"><% if(base!=null ) {%>
                               <div id="localImag" align="center">
                               <img id="photo" border="0" name="photo2" src="<%=request.getContextPath()%>/servlet/ShowImageServlet?id=<%=base.getId()%>" 
                               style="filter: progid :   DXImageTransform.Microsoft.AlphaImageLoader (   sizingMethod =   scale );"
                               width="100" height="120" οnlοad="setwh()"> </div>
                             <% }else{ %>
                               <div id="localImag" align="center"><img id="photo" src="<%=request.getContextPath()%>/admin/themes/default/images/wsczp.gif" 
                               style="filter: progid :   DXImageTransform.Microsoft.AlphaImageLoader (   sizingMethod =   scale );"
                               name="photo" width="114" height="156" alt="pic" οnlοad="setwh()"></div>
                             <%} %>
                               
                               
                             <p class=STYLE153 align="left">1、拍摄于6个月内的正面、免冠1寸电子版证件照；<br />
                               2、照片必须为JPG格式；<br />
                               3、照片大小100K以内；<br />
                             </p>
                             
                              <div id="shownode" ></div>
                              <input type="file" name="photo_file" id="photo_file" />
        			     </td>
                         </tr>
                       </table>
                   </div></td>
				</tr>
		   	
		
				 </div></td>
				</tr>	
				  <tr>
				<td height="27" align="left" class="f1" colspan=3><div align="left">论 文 及 成 果</div></td>
				</tr>		
				  <tr>
				<td height="27" align="left" class="f1" colspan=3><div align="left">应 聘 报 告</div></td>
				</tr>			
		  </table>
		   </form>
		  </div>
		   <div align="center" style="height:60px;valign:middle;"><br>
		     <!-- <input type="button"	value="上 一 步 " onClick="return laststep()" class="bt_reg6" /> -->        
		     <input type="button"	value="下 一 步  " onClick="return nextstep()" class="bt_reg6" />
		  </div>
		</div>
		<div id="bo_con"></div>
	</div>

	<!-- 页脚部分 -->
	<div id="footer">
		<jsp:include page="../include/foot.jsp"></jsp:include>
	</div>
	<!--   页面框架结束 -->
</body>
</html>