1 1 <div class="imageBox">
 2  2
 3  3     <div class="thumbBox"></div>
 4  4
 5  5     <div class="spinner"  style="display: none"></div>
 6  6
 7  7   </div>
 8  8
 9  9   <div class="action">
10 10
11 11     <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
12 12
13 13       <label for="upload-file">请先选择图片...</label>
14 14
15 15       </a>
16 16
17 17       <input type="file" class="" name="upload-file" id="upload-file" />
18 18
19 19     </div>
20 20
21 21
22 22     <input type="button"  id="btnCrop" class="Btnsty_peyton" value="✔">
23 23
24 24     <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
25 25
26 26     <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
27 27
28 28     <input type="button"  class="Btnsty_peyton"  value="✘" οnclick="cancel_shield()">
29 29   </div>
30 30
31 31   <div class="cropped"></div>
32 32
33 33 </div>

 1  1 $(window).load(function() {
 2  2     var options =
 3  3
 4  4     {
 5  5
 6  6         thumbBox: '.thumbBox',
 7  7
 8  8         spinner: '.spinner',
 9  9
10 10         imgSrc: ''
11 11
12 12     }
13 13
14 14     var cropper = $('.imageBox').cropbox(options);
15 15
16 16     var img="";
17 17
18 18     $('#upload-file').on('change', function(){
19 19
20 20         var reader = new FileReader();
21 21
22 22         reader.onload = function(e) {
23 23
24 24             options.imgSrc = e.target.result;
25 25
26 26             cropper = $('.imageBox').cropbox(options);
27 27
28 28             getImg();
29 29
30 30         }
31 31
32 32         reader.readAsDataURL(this.files[0]);
33 33
34 34         this.files = [];
35 35
36 36 //        getImg();
37 37
38 38     })
39 39
40 40     $('#btnCrop').on('click', function(){
41 41
42 42     swal("操作成功!", "图片上传喽!", "success");
43 43     $("#IconMessage").html("头像选择成功,再次点击更换头像");
44 44     var s=$("#haha1").attr("src");
45 45     $("#hideInput").val(s);
46 46     cancel_shield();
47 47     })
48 48
49 49
50 50     function getImg(){
51 51
52 52         img = cropper.getDataURL();
53 53
54 54         $('.cropped').html('');
55 55
56 56         $('.cropped').append('<img src="'+img+'" align="absmiddle"  style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
57 57
58 58         $('.cropped').append('<img src="'+img+'" align="absmiddle"  id="haha1" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
59 59
60 60         $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
61 61
62 62         }
63 63
64 64
65 65
66 66     $(".imageBox").on("mouseup",function(){
67 67
68 68          getImg();
69 69
70 70           });
71 71
72 72
73 73     $('#btnZoomIn').on('click', function(){
74 74
75 75         cropper.zoomIn();
76 76
77 77     })
78 78
79 79     $('#btnZoomOut').on('click', function(){
80 80
81 81         cropper.zoomOut();
82 82
83 83     })
84 84
85 85 });

            $("div[class='mod_page_nav js_pager']>a[class='js_pageindex'],div[class='mod_page_nav js_pager']>a[class='current']").click(function(){$("div[class='mod_page_nav js_pager'] a[class='current']").attr('class','js_pageindex');$(this).attr('class','current');});