<style>	
#imgur {cursor:pointer;vertical-align:bottom;width:20px;margin-right:15px;}
#my-imgur{border:4px solid aliceblue;text-align:center;line-height:40px;cursor:move;width:120px;font-size:16px;}
input[data-n^="i"] + label {opacity: 0.5;cursor: pointer;}
input[data-n^="i"]:checked + label {opacity: 1;filter: drop-shadow(1px 3px 3px #708090);}	
input[name="im"] {visibility: collapse;}
label[for="gur"] {width: 28px; height: 28px;background: url('https://forumstatic.ru/files/0012/72/15/22433.png') no-repeat -97px -10px;display: inline-table; vertical-align: sub;}
label[for="geban"] {width: 67px; height: 28px;
background: url('https://forumstatic.ru/files/0012/72/15/22433.png') no-repeat -10px -10px;display: inline-table; vertical-align: super;}
#progress-bar {width: 150px;height: 2px;background: #999999;position: relative;}
#progress-bar .progress-bg {position: absolute;width: 0;height: inherit;background: #0099ff;}
#progress-bar .progress-val {position: absolute;text-align: center;width: inherit;height: inherit;} 
@media screen and (max-width: 540px) {
#t-imgur{width:100% !important; border-collapse: collapse !important;}
#t-imgur td:empty{width:0px !important;}
#t-imgur td{empty-cells: hide; font-size:10px !important; padding: 0 !important;}
#my-imgur{width:90px !important; height:90px !important;font-size:12px !important;line-height: 1.5 !important;}
#image-area {width: 400px !important;}
#image_upload .button{display:none;}
}
</style>
<script type="text/javascript">
$('#image_upload .button').before('<div><input type="radio" id="gur" name="im" data-n="imgur" checked><label for="gur" title="Загрузить на Imgur"><span></span>&nbsp;</label><input type="radio" id="geban" name="im" data-n="imageban"><label for="geban" title="Загрузить на Imageban"><span></span></label></div>');
$('#image-area-tcon-computer').append('<table id="t-imgur" style="width:60%;"><tr><td><select id="thumb-width"><option value="b">160</option><option value="m" selected="selected">320</option><option value="l">640</option></select></td><td>Ширина превью<td><td rowspan="3" colspan="3"><div id="my-imgur">Перетащи сюда картинку или кликни!</div></td></tr><tr><td><select id="variant"><option value="viewer" selected="selected">Превью</option><option value="source">Оригинал</option></select></td><td><td></tr><tr><td><input type="file" id="fileUp" multiple style="display:none;width:0px;" /></td><td><td></tr><table>');

function upload(t){
	if (t && t.type.match(/image.*/)){
$("#my-imgur").css('border','none').html('<div id="progress-bar"><div class="progress-bg"></div><div class="progress-val">0%</div></div>');
var i = new FormData;
i.append("image", t);
var oi = [{n:'imgur', ur: 'https://api.imgur.com/3/image.json', au: 'Client-ID 28aaa2e823b03b1'},
	{n:'imageban', ur: 'https://api.imageban.ru/v1', au: 'TOKEN D9DSuWwRho6XsnN9NKwM'}];
for (var j=0; j< oi.length; j++) {
if ($('input[data-n="'+oi[j].n+'"]').is(':checked')){
$.ajax({url: oi[j].ur,
	type: 'POST', headers: {'Authorization': oi[j].au},
	data: i,cache: false,contentType: false,processData: false,dataType: 'json',
xhr: function(){
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
	if (evt.lengthComputable) {
var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
$('.progress-bg').css('width', percentComplete +'%');$('.progress-val').text(percentComplete +'%');
	}
}, false);
return xhr;
	},
	success: function (data) {
var i = data.data.link, e, z;
if(i.match(/imgur/)){ z = $("#thumb-width option:selected").val(); e = i.replace(/\.(jpe?g|gif|png|svg)/gi, z+".$1");
}else{e = i.replace(/\/out\/(\d+)\/(\d+)\/(\d+)\//gi, '/thumbs/$1.$2.$3/');}
$('#my-imgur').css('border','4px solid aliceblue').text('Перетащи сюда картинку или кликни!');
$("#variant option:selected").text().match(/Превью/) ? insert("[url=" + i + "][img]" + e + "[/img][/url]" + "\n") : insert("[img]" + i + "[/img]" + "\n");
	},
	error: function (data) { $('#my-imgur').text(JSON.parse(data.responseText).data.error);},
	});
}}  } };

$('#my-imgur').live('click', function (){$('#fileUp').unbind(),$('#fileUp').click(),$('#fileUp').change(function (){
for(var i = 0; i < $(this).get(0).files.length; ++i) {
upload(this.files[i]);
	} 
})
	});


	$('#my-imgur').live('dragover', !1).live('drop', function (i){
return upload(i.originalEvent.dataTransfer.files[0]),
!1
	});
$('label[for="gur"],label[for="geban"]').tipsy({gravity:'se',live:!0,fade:!0});
</script>

#imageupload-right { 
    width: 370px; 
    margin-left: 10px; 
    display: inline-block; 
}

#imageupload-right {
    position: absolute;
    width: 370px;
    margin-left: 10px;
    display: inline-block;
}