drag & drop de foto con mas datos

[viringas]

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:

<p class="titulo">
                ALTA DE UN NUEVO COLABORADOR.
</p>
<br>
<br>    
<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"/>
</form>
 
    
<br /><br /><br />
<div id="dropbox"><span id="droplabel">Suelta imagen aqui...</span>
    
</div>
 
<br/>
<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;" >
    <p class="texto">
        COLABORADOR/INSTITUCION AÑADIDO/A SATISFACTORIAMENTE.
    </p>
</div>
 

este es el script q tengo para enviar dos datos sin la imagen:

Código Javascript:

<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:

$(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