!140 修复 头像上传跨域问题

Merge pull request !140 from Coxxs/fix/avatar
This commit is contained in:
Coxxs 2018-01-13 12:05:56 +08:00 committed by Discuz!
parent 60405cd703
commit 3617dc0d42
3 changed files with 43 additions and 47 deletions

View File

@ -16,9 +16,8 @@ jQuery('#avatarcanvas').attr('width', (dwidth-150));
jQuery('#avatarcanvas').attr('height', dheight-25);
jQuery('#avatardisplaycanvas').attr('width', dwidth-20);
jQuery('#avatardisplaycanvas').attr('height', dheight-25);
var src = data[data.indexOf('src')+1].replace('images/camera.swf?inajax=1','index.php?m=user&a=uploadavatar');
$('avatarform').action = src;
$('avatarform').target ='uploadframe';
$('avatarfile').onchange = uploadAvatarDone;
jQuery(document).ready(function () {
jQuery("#selector")
@ -41,27 +40,20 @@ jQuery(document).ready(function () {
jQuery("#slider").append("<div style='position: absolute; top: -2px; left: 100px; width: 3px; height: 6px; background-color: black;'>&nbsp;</div>" );
});
function uploadAvatarDone() {
var iframe = $('uploadframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
if (!iframeDocument.body) return;
var imageSrc = iframeDocument.body.innerHTML;
if (!imageSrc) return;
window.addEventListener('message', receiveMessage, false);
if (imageSrc.indexOf('/')===-1) { // server returns error message
if (imageSrc!=-4) { // ie11 bug?: called twice, the value in the second time is -4
alert(imageSrc);
}
function receiveMessage(event) {
var msgdata = event.data;
if (typeof(msgdata) !== 'string') {
return;
}
try {
var av = $('avatarfile');
av.value = '';
if(av.value){
av.type = "text";
av.type = "file";
rectAvatarDone(msgdata);
}
} catch(e){}
function uploadAvatarDone() {
if (this.files && this.files[0]) {
var fr = new FileReader();
fr.onload = function(e) {
jQuery('#avatarfileselector').hide();
jQuery('#avatardisplayer').hide();
jQuery('#avataradjuster').show();
@ -69,9 +61,11 @@ function uploadAvatarDone() {
jQuery('#selector').css('top', Math.floor((dheight-150)/2));
jQuery('#selector').width(150);
jQuery('#selector').height(150);
imageSrc += "?" + (new Date());
$('avatarimage').src = imageSrc;
$('avatarimage').src = e.target.result;
jQuery("#slider").slider('value', 50);
};
fr.readAsDataURL(this.files[0]);
}
}
function showAvatarFileSelector() {
@ -189,6 +183,8 @@ function saveAvatar() {
canvas.width = tw;
canvas.height = th;
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, tw, th);
ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
var dataURL = canvas.toDataURL("image/jpeg");
jQuery('#avatar1').val(dataURL.substr(dataURL.indexOf(",") + 1));
@ -204,6 +200,8 @@ function saveAvatar() {
canvas.width = tw;
canvas.height = th;
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, tw, th);
ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
var dataURL = canvas.toDataURL("image/jpeg");
jQuery('#avatar2').val(dataURL.substr(dataURL.indexOf(",") + 1));
@ -223,12 +221,14 @@ function saveAvatar() {
canvas.width = tw;
canvas.height = th;
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, tw, th);
ctx.drawImage(img, sl, st, sw, sh, 0, 0, tw, th);
var dataURL = canvas.toDataURL("image/jpeg");
jQuery('#avatar3').val(dataURL.substr(dataURL.indexOf(",") + 1));
var src = $('avatarform').action;
$('avatarform').action = src.replace('&a=uploadavatar', '&a=rectavatar&base64=yes');
$('avatarform').action = data[data.indexOf('src')+1].replace('images/camera.swf?inajax=1', 'index.php?m=user&a=rectavatar&base64=yes');
$('avatarform').target='rectframe';
}
@ -291,11 +291,7 @@ function refreshAvatarCanvasForDisplay() {
ctx.fillText('以上是您头像的三种尺寸', dwidth - 200, 180);
}
function rectAvatarDone() {
var iframe = $('rectframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
if (!iframeDocument.body) return;
var res = iframeDocument.body.innerHTML;
function rectAvatarDone(res) {
if (!res) return;
if (res=='success') {
jQuery('#avatardisplayer').show();

View File

@ -1,6 +1,6 @@
<div id="avatardesigner">
<div id="avatarfileselector">
<input type="file" name="Filedata" id="avatarfile" accept="image/*" onchange="this.form.submit();" />
<input type="file" name="Filedata" id="avatarfile" accept="image/*" />
</div>
<div id="avataradjuster">
<img id="avatarimage" style="visibility: hidden;" onload="forceSelectorInsideAvatar();" />
@ -33,15 +33,15 @@
</div>
</div>
<script src="static/js/mobile/jquery.min.js?{VERHASH}"></script>
<script src="{STATICURL}js/mobile/jquery.min.js?{VERHASH}"></script>
<script type="text/javascript">
jQuery.noConflict();
var data = "{echo implode(",", $uc_avatarflash);}".split(',');
</script>
<link rel="stylesheet" href="static/avatar/avatar.css?{VERHASH}" />
<script src="static/avatar/jquery-ui.min.js?{VERHASH}"></script>
<script src="static/avatar/avatar.js?{VERHASH}"></script>
<link rel="stylesheet" href="{STATICURL}avatar/avatar.css?{VERHASH}" />
<script src="{STATICURL}avatar/jquery-ui.min.js?{VERHASH}"></script>
<script src="{STATICURL}avatar/avatar.js?{VERHASH}"></script>
<iframe name="uploadframe" id="uploadframe" style="display: none;" onload="uploadAvatarDone();"></iframe>
<iframe name="rectframe" id="rectframe" style="display: none;" onload="rectAvatarDone();"></iframe>
<iframe name="uploadframe" id="uploadframe" style="display: none;"></iframe>
<iframe name="rectframe" id="rectframe" style="display: none;"></iframe>

View File

@ -398,9 +398,9 @@ class usercontrol extends base {
if(getgpc('base64', 'G')){
if($success) {
return "success";
return "<script>window.parent.postMessage('success','*');</script>";
} else {
return "failure";
return "<script>window.parent.postMessage('failure','*');</script>";
}
}else{
if($success) {