头像上传修改

src/main/webapp/photo-set.html

@@ -28,7 +28,7 @@
								<div id="fileList" class="uploader-list"></div>
								<div id="filePicker">选择图片</div>
						 </div>
						<span class="resouimgmsg">尺寸240*240，大小在5M以内，JPG、PNG格式</span> 
						<span class="resouimgmsg">建议尺寸340*340，大小在5M以内，JPG、PNG格式</span> 
                     </div>
                     <!---->
                     <!--选择图片尺寸-->
@@ -36,7 +36,7 @@
                                 <div class="wl">
                                     <div class="jc-demo-box" data="0">
                                         <div id="target" class="jcrop_w" >
                                             <img src="" width="602" height="400" id="headImage" />
                                            <img src="" id="headImage">
                                         </div>
                                     </div>
                                  <!--    <div class="jy-up-ch" >
@@ -57,15 +57,15 @@
                             <div class="pre-1">
                                 <img  src="" class="jcrop-preview jcrop_preview_s" alt="" id="largeImage"/>
                             </div>
                             <p>200px*200px</p>
                             <p style="font-size: 14px;">200px*200px</p>
                             <div class="pre-2">
                                 <img src="" class="jcrop-preview jcrop_preview_s" alt="" id="middleImage"/>
                             </div>
                             <p>50px*50px</p>
                             <p style="font-size: 13px;">50px*50px</p>
                             <div class="pre-3">
                                 <img src="" class="jcrop-preview jcrop_preview_s" alt="" id="smallImage"/>
                             </div>
                             <p>26px*26px</p>
                             <p style="font-size: 12px;">26px*26px</p>
                         </div>
                     </div>
                 </div>
@@ -95,8 +95,11 @@
<script type="text/javascript" src="js/common.js"> </script>
<script type="text/javascript"src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function (){
   
$(function (){
 
     //初始化截图框
     var _Jw = ($("#target").width() - 200) / 2 ,
         _Jh = ($("#target").height() - 200) / 2 ,
@@ -200,6 +203,7 @@ $(function (){
		    // $list为容器jQuery实例
		    var $list = $('#fileList');
		   
		    $list.empty("");
		  //  $list.append( $li );
           setTimeout(target,500);
@@ -211,7 +215,7 @@ $(function (){
		            $img.replaceWith('<span>不能预览</span>');
		            return;
		        }
		        $img.attr( 'src', src );
		      
		    }, 240, 240 );
		    
		    //判断上传文件格式
@@ -240,27 +244,32 @@ $(function (){
		    }
		   $percent.css( 'width', percentage * 100 + '%' );
			
		});		
		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
		cacheImageKey=null;
		uploader.on( 'uploadSuccess', function(file,data) {
		console.log(file.id);
		$("#jcropdiv").show();
		$(".load").hide();
		uploader.removeFile(fileId);
		cacheImageKey =data.data[0].cacheKey;			
		$("#headImage").attr("src","/images/tmp/"+cacheImageKey);
		$("#smallImage").attr("src","/images/tmp/"+cacheImageKey);
		$("#middleImage").attr("src","/images/tmp/"+cacheImageKey);
		$("#largeImage").attr("src","/images/tmp/"+cacheImageKey);
		$('#largeImage').attr("style","");
  		$('#middleImage').attr("style","");
  		$('#smallImage').attr("style","");					  
			console.log(file);
			$("#jcropdiv").show();
			$(".load").hide();
			uploader.removeFile(fileId);
			cacheImageKey =data.data[0].cacheKey;			
			$("#headImage").attr("src","/images/tmp/"+cacheImageKey);
			$("#smallImage").attr("src","/images/tmp/"+cacheImageKey);
			$("#middleImage").attr("src","/images/tmp/"+cacheImageKey);
			$("#largeImage").attr("src","/images/tmp/"+cacheImageKey);
			$('#largeImage').attr("style","");
	  		$('#middleImage').attr("style","");
	  		$('#smallImage').attr("style","");
		     setTimeout(function(){
		     	cutImage($(".jcrop_w>img"))
		     }, 30);
		});
	}
    
    //保存
	$("#saveImage").on("click",function(){
	  
	if(cacheImageKey==null) {
		$.MsgBox.Alert("消息","请选择图片");
		return;
@@ -306,20 +315,24 @@ $(function (){
		$("#smallImage").attr("src","/images/head/"+id+"_s.jpg");
		$("#middleImage").attr("src","/images/head/"+id+"_m.jpg");
		$("#largeImage").attr("src","/images/head/"+id+"_l.jpg");
 		$('#target').Jcrop({
	        setSelect: [_Jw, _Jh, _Jw2, _Jh2],
	    });
 		$('#target').Jcrop({ setSelect: [_Jw, _Jh, _Jw2, _Jh2],	});
	    $('#largeImage').attr("style","");
 		$('#middleImage').attr("style","");
 		$('#smallImage').attr("style","");	
 		$('#smallImage').attr("style","");
 		$('#headImage').attr("style","");	
	})
    
    //返回
	$("#back").on("click",function(){
		window.history.back(-1); 
	}) 
	
	
})
</script>
</body>
</html>