hola, se me ocurrio la idea de poder subir fotos arrastrando y soltando con html5 y jquery, al arrastrar la imagen a un div lo q hago es q cuando suelta convierte la imagen en una ruta url
Código Javascript
:
Ver original$(document).ready(function() {
var dropbox = document.getElementById("dropbox")
// init event handlers
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragexit", dragExit, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);
});
function dragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragExit(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var count = files.length;
// Only call the handler if 1 or more files was dropped.
if (count > 0)
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
document.getElementById("droplabel").innerHTML = "imagen guardada";
var reader = new FileReader();
reader.onloadend = handleReaderLoadEnd;
// begin the read operation
reader.readAsDataURL(file);
}
function handleReaderLoadEnd(evt) {
var img = document.getElementById("preview");
img.src = evt.target.result;
}
la imagen la deposita en esta etiketa <img>
Código HTML:
Ver original<div id="dropbox"><span id="droplabel">Suelta imagen aqui...
</span>
<i>¿es este el logo que quieres subir?
</i> <img id="preview" alt=" no archivo" src="" style="width:20px; height:20px;"/>
mi pregunta es: tengo otros datos q recojo en un formulario y keria enviar tanto los datos como la imagen la cual la tengo convertida como data url
si tngo la imagen asi, me hace falta tb tener un iframe para poder enviar la imagen con los otros datos o podria enviar todos los datos asi juntos?