hola a todos
estoy insertando imagenes mediante drag and drop con html5 pero mi problema es q no se como poder enviar la imagen junto con mas datos a mi bd, la imagen keria guardarla en una carpeta, y q en la base de datos guarde la referencia, lo tengo implementado asi:
Código HTML:
Ver original ALTA DE UN NUEVO COLABORADOR.
<form method="post" action="enviaDatosAltaColab.php" id="formAltaColab" class="texto2"> nombre del colaborador:
<input type="text" name="colab" id="colab" size="25" class=":required :only_on_submit" /> <br><br> direccion web del colaborador:
<input type="text" name="urlcolab" id="urlcolab" size="25" class=":required :only_on_submit" /> <br><br> <input type="image" src="img/bt_login.png" id="btsend" name="btsend" class="btsend"/>
<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;"/>
<div class="msg" style="display:none;" > COLABORADOR/INSTITUCION AÑADIDO/A SATISFACTORIAMENTE.
este es el script q tengo para enviar dos datos sin la imagen:
Código Javascript
:
Ver original<script>
$("#formAltaColab").submit(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "enviaDatosAltaColab.php",
data: $("#formAltaColab").serialize(),
success: function(){
$("#formAltaColab").hide(function(){$('div.msg').fadeIn('slow').fadeOut(6000);});
$("#flotante").fadeOut(4000);
}
});
});
</script>
y este es el otro escript q hace q funcione el drag and drop
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;
}
el problema es q cuando yo lo arrastro no se a donde va a parar la imagen, mire en la carpeta temp y nada y ya llevo intentado miles de soluciones, mi idea es q el usuario introduce los datos en el formulario, arrastra la imagen y al soltarla es cuando envie la imagen en una carpeta y la ruta en la bd jutno con los demas datos
si alguien pudiese decirme una ayuda o algunas modificaciones q puedo hacer xq me encuentro totalmente perdido