请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1866681

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//上传头像
$(window).load( function () {
     $( '#upload-file' ).on( 'change' ,  function (){
         var  fimg =  this .files[0];
         var  filter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
         if ( this .files.length !== 0){
         if (!filter.test(fimg.type)){
             alertBoxSmall( "请选择有效的图片文件！" );
         } else  if (parseInt(fimg.size/1024) > 1024){
             alertBoxSmall( "图片大小不得超过1M！" );
         } else {
         var  reader =  new  FileReader();
         reader.onload =  function (e) {
             $( "#avatar" )[0].src = e.target.result;
             cropped();
             //上传头像遮罩随时变化
             $( 'img#avatar' ).imgAreaSelect({
                     aspectRatio:  "1:1" ,
                     x1: 100,
                     y1:0,
                     x2: 300,
                     y2: 200,
                 });
             }
         reader.readAsDataURL( this .files[0]);
         }
         }
     })
     //$('#btnCrop').on('click', cropped);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
     //上传头像
                 $( 'img#avatar' ).imgAreaSelect({
                         aspectRatio:  "1:1" ,
                         x1: 100,
                         y1:0,
                         x2: 300,
                         y2: 200,
                         onSelectEnd: selectInit,
                         onSelectChange: preview
                     });        
function  cropped(){
     var  img = $( "#avatar" ).attr( "src" );
     $( '.cropped ul li:first-child img' ).attr( "src" ,img);
     $( '.cropped ul li:nth-child(2) img' ).attr( "src" ,img);
     $( '.cropped ul li:last-child img' ).attr( "src" ,img);
}
function  adjust(el, selection) {
     var  scaleX = $(el).width() / (selection.width || 1);
     var  scaleY = $(el).height() / (selection.width || 1);
     $(el+ ' img' ).css({
         width: Math.round(scaleX*$( '#avatar' ).width() ) +  'px' ,
         height: Math.round(scaleY*$( '#avatar' ).height() ) +  'px' ,
         marginLeft:  '-'  + Math.round(scaleX * selection.x1) +  'px' ,
         marginTop:  '-'  + Math.round(scaleY * selection.y1) +  'px'
     });
}
 
function  preview(img, selection) {
     adjust( '#small_preview01' , selection);
     adjust( '#small_preview02' , selection);
     adjust( '#small_preview03' , selection);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*图像上传2*/
/*
  * imgAreaSelect default style
  */
 
.imgareaselect-border 1  {
     background :  url (../images/border-v.gif)  repeat-y  left  top ;
}
 
.imgareaselect-border 2  {
     background :  url (../images/border-h.gif)  repeat-x  left  top ;
}
 
.imgareaselect-border 3  {
     background :  url (../images/border-v.gif)  repeat-y  right  top ;
}
 
.imgareaselect-border 4  {
     background :  url (../images/border-h.gif)  repeat-x  left  bottom ;
}
 
.imgareaselect-border 1 , .imgareaselect-border 2 ,
.imgareaselect-border 3 , .imgareaselect-border 4  {
     filter: alpha(opacity= 80 );
     opacity:  0.8 ;
}
 
.imgareaselect-handle {
     background-color :  #fff ;
     border :  solid  1px  #000 ;
     filter: alpha(opacity= 50 );
     opacity:  0.5 ;
}
 
.imgareaselect-outer {
     background-color :  #000 ;
     filter: alpha(opacity= 50 );
     opacity:  0.5 ;
     max-height :  200px ;
}
 
.imgareaselect-selection {  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
< div  class = "right-container set" >
                 < div  class = "" >
                     < div  class = "box02" >
                         < div  class = "imageBox" >
                             < img  id = "avatar"  src = "../Content/images/preview.png" />
                            <!-- <div class="spinner" style="display: none">Loading...</div>-->
                         </ div >
                         < form  id = "crop_form"  method = "post"  action = "." >
                             <!--通过生成尺寸  后台获取尺寸再进行裁剪-->
                             < input  id = "id_top"  type = "hidden"  name = "top"  >
                             < input  id = "id_left"  type = "hidden"  name = "left" >
                             < input  id = "id_right"  type = "hidden"  name = "right" >
                             < input  id = "id_bottom"  type = "hidden"  name = "bottom" >
                             < input  id = "id_width"  type = "hidden"  /> 
                             < input  id = "id_height"  type = "hidden"  />
                         </ form >
                         < div  class = "action" > 
                             < div  class = "new-contentarea tc" > < a  href = "javascript:void(0)"  class = "upload-img" >
                                 < label  for = "upload-file" >上传</ label >
                                 </ a >
                                 < input  type = "file"  class = ""  name = "upload-file"  id = "upload-file"  />
                             </ div >
                             < input  type = "button"  id = "btnCrop"   class = "Btnsty_peyton"  value = "保存" >
                             < div  class = "imgIntro" >你可以上传JPG、JPEG、PNG格式文件，限制大小1M以内</ div >
 
                         </ div >
                             < div  class = "cropped"  >
                                 < ul >
                                     < li  >
                                         < span >100*100</ span >
                                         < span  class = "img01"  id = "small_preview01" >< img  src = "../Content/images/preview.png"  id = "avatar1"  style = "margin-left: -50px;width: 200px;" /></ span > 
                                     </ li >
                                     < li  >
                                         < span >55*55</ span >
                                         < span  class = "img02"  id = "small_preview02" >< img  src = "../Content/images/preview.png"  id = "avatar2"  style = "margin-left: -25px;width: 110px;" /></ span >
                                     </ li >
                                     < li >
                                         < span >32*32</ span >
                                         < span  class = "img03"   id = "small_preview03" >< img  src = "../Content/images/preview.png"  id = "avatar3"  style = "margin-left: -15px;width: 64px;" /></ span >
                                     </ li >
                                 </ ul >
                             </ div >
                     </ div >

效果如下，demo见附件：

wKiom1ghqfHDd9RoAAImrpq28yM178.png-wh_50