修改图片上传

src/main/webapp/photo-set.html

@@ -57,7 +57,7 @@
                             <div class="pre-1">
                                 <img  src="" class="jcrop-preview jcrop_preview_s" alt="" id="largeImage"/>
                             </div>
                             <p>200px*200px</p>
                             <p>160px*160px</p>
                             <div class="pre-2">
                                 <img src="" class="jcrop-preview jcrop_preview_s" alt="" id="middleImage"/>
                             </div>
@@ -91,7 +91,6 @@
<script type="text/javascript" src="js/jquery.HeadP.js"> </script>
<script type="text/javascript" src="js/jquery.Jcrop.js"> </script>
<script type="text/javascript" src="js/basic.js"> </script>
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>	
<script type="text/javascript"src="js/jquery.cookie.js"></script>
<script type="text/javascript">
@@ -106,6 +105,7 @@ $(function (){
    $('#smallImage').attr("style","");
	var id = $.cookie('userid');
	var cacheImageKey=null;
	var fileId = null;
	if(id){
		$("#headImage").attr("src","/images/head/"+id+"_l.jpg");
		$("#smallImage").attr("src","/images/head/"+id+"_s.jpg");
@@ -138,8 +138,8 @@ $(function (){
		});
	
		// 当有文件添加进来的时候
		uploader.on( 'fileQueued', function( file ) {	
			/* alert(file.name); */		
		uploader.on( 'fileQueued', function( file ) {				
			 fileId = file.id;			
		    var $li = $(
		            '<div id="' + file.id + '" class="file-item thumbnail">' +
		                '<img>' +
@@ -194,21 +194,18 @@ $(function (){
		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
		cacheImageKey=null;
		uploader.on( 'uploadSuccess', function(file,data) {
		
		console.log(file.id);
		$("#jcropdiv").show();
		$(".load").hide();
			cacheImageKey =data.data[0].cacheKey;
			console.log(cacheImageKey);
			$("#headImage").attr("src","/images/tmp/"+cacheImageKey);
			$("#smallImage").attr("src","/images/tmp/"+cacheImageKey);
		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(cacheImageKey);
		   // $( '#'+file.id ).addClass('upload-state-done');
			$("#filePicker").hide();
  		 $('#smallImage').attr("style","");					  
		});
		
		/*$('#uploadInput').live('change',function(){ 
@@ -242,10 +239,19 @@ $(function (){
    
    //保存
	$("#saveImage").on("click",function(){
		var x = parseInt($("#x").val()/395*100);
		var y = parseInt($("#y").val()/340*100);
		var w = parseInt($("#w").val()/395*100);
		var h = parseInt($("#h").val()/340*100);
	if(cacheImageKey==null) {
		$.MsgBox.Alert("消息","请选择图片");
		return;
	}
		var iw = $('.jcrop_w>img').width(),ih = $('.jcrop_w>img').height(),ow = (395 - iw) / 2,oh = (340 - ih) / 2;
		var x = parseInt(($("#x").val()-ow)/395*100);
		var y = parseInt(($("#y").val()-oh)/340*100);
		var w = parseInt($("#w").val()/(395-ow-ow)*100);
		var h = parseInt($("#h").val()/(340-oh-oh)*100);
		if(x<0 || y<0 || ((w+x)>100) || ((h+y)>100)){
		   $.MsgBox.Alert("消息","裁剪超出图片，请重新裁剪");
			return;			
		}
		if(cacheImageKey){
			$.ajax({
				url:"../ajax/image/head",
@@ -268,13 +274,14 @@ $(function (){
    //取消
	$(".close").on("click",function(){
	
		$(".load").show();
		$("#jcropdiv").hide();
		$("#filePicker").show();
		//$("#filePicker").show();
		$("#headImage").attr("src","");
		$("#smallImage").attr("src","");
		$("#middleImage").attr("src","");
		$("#largeImage").attr("src","");
		$("#largeImage").attr("src","");		
	})
    
    //返回