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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
| <html lang="en" style="overflow-x:visible;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content=""> <meta name="keywords" content=""> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <link rel="stylesheet" type="text/css" href="./css/self_container.css"> <link rel="stylesheet" type="text/css" href="./css/self_bootstrap.css"> <link rel="stylesheet" type="text/css" href="./css/jquery.Jcrop.min.css"> </head> <body style="overflow-x:visible;"> <div class="self_container"> <div class="content-wrapper" style="min-height: 800px;"> <div class="col-md-9"> <div class="panel panel-default panel-col"> <div class="panel-heading"> 头像设置</div> <div class="panel-body"> <form id=form1 style="display: block" enctype="multipart/form-data" class="form-horizontal" method="post"> <div class="form-group"> <div class="col-md-2 control-label"> <b> 当前头像</b> </div> <div class="controls col-md-8 controls"> <img src="./img/avatar.jpg"> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> </div> <div class="controls col-md-8 controls"> <p class="help-block"> 仅支持上传JPG格式的文件。 </p> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> </div> <div class="controls col-md-8 controls"> <a id="upload-picture-btn" class="btn btn-primary webuploader-container" > <div class="webuploader-pick"> 上传新头像</div> <div id="" style="position: absolute; top: 6px; width: 70px; height: 20px; overflow: hidden; bottom: auto; right: auto;"> <input id="avatar1" type="file" name="avatar" class="webuploader-element-invisible" accept="image/png,image/jpg,image/jpeg,imge/bmp,image/gif"> <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"> </label> </div> </a> </div> </div> </form> <form id="form2" style="display: none;" action="" method="post"> <div class="form-group clearfix"> <div class="col-md-offset-2 col-md-8 controls"> <img id="cropbox" class="img-responsive" src="" > <div class="help-block"> 提示:请选择图片裁剪区域。</div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-8 controls"> <a class="btn btn-fat btn-primary" id="upload-avatar-btn" data-url="/settings/avatar/crop" data-goto-url="/settings/avatar"> 保存 <input id="commit" type="button" value="保存" style="position: absolute; left: 10px; width: 55px; height: 35px; top:0px; opacity: 0;" /> </a> </div> <div class="col-md-offset-2 col-md-8 controls"> <a id="upload-picture-btn" class="btn btn-primary webuploader-container" > <div class="webuploader-pick"> 重新选择图片</div> </a> </div> </div> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="./js/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="./js/jquery.Jcrop.min.js"></script> <script type="text/javascript"> (function(){ $("#avatar1").change(function() { var img = $(".img-responsive"); var reader = new FileReader(); reader.readAsDataURL(this.files[0]); reader.onload = function (e) { img.attr('src',this.result); $("#form1").css('display','none'); $("#form2").css('display','block'); $('.img-responsive').Jcrop({ boxWidth:600, boxHeight:300, aspectRatio: 1, onSelect: updateCoords, }); } }); $(".webuploader-pick").click(function() { location.reload(); }); })() $("#commit").click(function(){ var avatarForm = document.getElementById('form2'); var formData = new FormData(avatarForm); $(".img-responsive").each(function(){ var blob = dataURItoBlob(this.src); formData.append("avatar", blob, 'avatar.jpg'); }); $.ajax({ url: 'upload.php', type: 'post', processData: false, contentType: false, data: formData, success: function(data){ location.reload(); }, error: function(){ alert("error"); } }); }) function dataURItoBlob(base64Data) { var byteString; if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(',')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type:mimeString}); } function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> </body> </html>
|