jQuery(document).ready(function() {
var layer = jQuery('
Imagen: Opacidad: Top: Left:
');
jQuery(document.body).prepend(layer);
dl_layer = jQuery('#dl-layer')
.css({
position: 'fixed',
height: '30px',
background: '#CCC',
width: '100%',
margin: '0',
top: '0px',
padding: '10px',
opacity: '0.7',
zIndex: 1200
})
.hover(
function() {
jQuery(this).css({opacity: 1})
},
function() {jQuery(this).css({opacity: 0.7})});
dl_layer.find('#dropbox')
.css({border: '1px solid #AAA', background: '#FFF', display: 'block', float: 'left', width: '30px', height: '30px'})
dl_layer.find('strong').css({color: '#333', paddingLeft: '10px'});
dl_layer.find('input:text').css({border: '2px solid #333'});
jQuery('#dl-fichero').keyup(function() {
jQuery('#dl-imagen').remove();
var img = jQuery('');
jQuery(document.body).prepend(img);
dl_layer.hide();
persiana.css({top: '0px'}).find('a').html('MOSTRAR');
img.css({opacity: jQuery('#dl-opacidad').val(), position: 'absolute', top: '0px', zIndex: 900});
});
jQuery('#dl-opacidad').keyup(function() {jQuery('#dl-imagen').css({opacity: this.value})});
jQuery('#dl-top').keyup(function() {jQuery('#dl-imagen').css({top: this.value+'px'})});
jQuery('#dl-left').keyup(function() {jQuery('#dl-imagen').css({left: this.value+'px'})});
var persiana = jQuery('#dl-persiana')
.css({
position: 'fixed',
width: '100%',
margin: '0',
top: '50px',
textAlign: 'center',
opacity: '0.7',
zIndex: 1200
})
.click(function() {
dl_layer.toggle();
jQuery(this)
.css({top: dl_layer.is(':visible')?'50px':'0px'})
.find('a').each(function() {jQuery(this).html(dl_layer.is(':visible')?'OCULTAR':'MOSTRAR');});
});
persiana.find('a').css({
color: '#333', textTransform: 'uppercase', fontFamily: 'Arial', fontWeight: 'bold', textDecoration: 'none', background: '#aaa', padding: '3px 6px'
}).html(dl_layer.is(':visible')?'OCULTAR':'MOSTRAR');
// Drag & Drop de Firefox
// http://demos.hacks.mozilla.org/openweb/DnD/main.js
var dropbox;
window.addEventListener("dragenter", dragenter, true);
dropbox = document.getElementById("dl-layer");
window.addEventListener("dragleave", dragleave, true);
dropbox.addEventListener("dragover", dragover, true);
dropbox.addEventListener("drop", drop, true);
function dragenter(e) {
dropbox.setAttribute("dragenter", true);
jQuery(dropbox).css({background:'#BBB'});
}
function dragleave(e) {
dropbox.removeAttribute("dragenter");
jQuery(dropbox).css({background:'#CCC'});
}
function dragover(e) {
e.preventDefault();
}
function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
e.stopPropagation()
e.preventDefault();
for (var i = 0; i < files.length; i++) {
var file = files[i];
handleFile(file);
break; // solo permito una imagen
}
}
function handleFile(file) {
var imageType = /image.*/;
var bag = document.getElementById("dl-fichero");
if (!file.type.match(imageType)) {
return false;
}
jQuery('#dl-imagen').remove();
var img = document.createElement("img");
img.id = "dl-imagen";
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
persiana.after(img);
}
reader.readAsDataURL(file);
dl_layer.hide();
persiana.css({top: '0px'}).find('a').html('MOSTRAR');
jQuery(img).css({opacity: jQuery('#dl-opacidad').val(), position: 'absolute', top: '0px', zIndex: 900});
jQuery('#dl-fichero').attr('value', 'UPLOADED');
return true;
}
});