subir imagen arrastrando y soltando

[viringas]

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:

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

<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;"/>
 

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?

[chichote]

Claro, mediante jquery no podrás enviar la imagen, puedes enviar esa url pero no la subirla, para eso tendrias q utilizar otro metodo como bien dices iframe para vitar recargar la pagina, hechale un vistazo a http://pixeline.be/experiments/jqUploader/test.php, que lo que hace es basicamente subir un archivo antes de enviar el formulario.

Saludos.

[viringas]

lo q tu dices es q subira primero el archivo antes de enviar el formulario?

a mi me interesaria poder enviar todo junto, es decir no puedo hacer q el formulario envie los datos al iframe y despues del iframe los envie al php donde hago la llamada a la base de datos?

[viringas]

probe como tu dices pero asi solo lo puedo hacer mediante la caja de subida, intente hacer q si arrastras y sueltas una foto copie la url en la caja de texto para q asi lo suba pero no funciona, se te ocurre alguna idea xq yo probe asi para poder subir la foto arrastrando y no va

[chichote]

El plugin que te mencione te permite manipular sus eventos a traves de funciones, es decir, si subes imagenes, luego puedes obtener la url de de las imagenes en tu server, y luego ya es muy simple enviarlas por ajax para que las puedas guardar en la base de datos.

Con respecto a arrastrar y subir no se si se pueda, de hecho todos los cargadores de imagenes que funcionan como tu lo dices los he visto en java, pero nunca he visto uno en html. y por otro lado no experimentado mucho con html5, por lo que no podria decirte si se puede o no.

Saludos.

Saludos.

[viringas]

el codigo javascript q pegue yo en mi primer post funciona y permite arrastar y soltar x si lo kieres probar, el tema q te comentaba es ese q no se de q forma puedo enlazar dicho codigo con el plugin q me dices tu el cual funciona, esq me interesaba q funcionase el tema de arrastar y soltar xq le da un aspecto de manejabilidad muy simple de cara a la interaccion de la pagina con el usuario pero bueno intentare buscar alguna solucion sino tendre q dejar solo la caja input para subir fotos

x cierto tu no sabras de algun script o algo q redimensione las fotos una vez las extraes de la base de datos


gracias

[chichote]

http://www.webresourcesdepot.com/jqu...-plugin-jcrop/ para recortar imagenes, pero es jquery, pero entiendo que estas trabajando con ExtJS.

Saludos.

[viringas]

utilice el plugin q me recomendaste pero no me aparecen los .js q tengo q incluir en mi web,

x ejemplo me dice q tengo q incluir los archivos
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="dependencies/swfobject.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>


y al descargar los archivos no me aparecia ninguno en la carpeta excepto el jquploader,

son necesarios los otros dos para q funcione el plugin? o como puedo hacer

[chichote]

Viringas:

El primero se refiere a jquery, descargalo de jquery.com y el swfobject puedes descargarlo de code.google.com/p/swfobject/ pero te recomiendo ver el codigo fuente del ejemplo y descargarlos desde hay, te aseguraras de la compatibilidad.

Saludos.

[viringas]

ya me funciona, era un problema de especificacion de rutas pero me podrias indicar como podria hacer para subir aparte de las fotos mas datos, es decir aparte de una foto keria subir tb pues un nombre y una direccion seria algo tal q asi:
(es q probe y no me funciona)

Código Javascript:

$(document).ready(function() {
  $('#file_upload').uploadify({
    'scriptData' : {'colab': $("#colab").val()},  
     'scriptData2' : {'urlcolab': $("#urlcolab").val()}
     'uploader'  : 'j-query/uploadify/uploadify.swf',
    'script'    : 'j-query/uploadify/uploadify.php',
    'cancelImg' : 'j-query/uploadify/cancel.png',
    'folder'    : 'j-query/uploadify/logosColab',
    'auto'      : true
  });
});
 

Código HTML:

<p class="texto2"> nombre colaborador:</p>
<input type="text" name="colab" id="colab" size="30" />
<p class="texto2"> url colaborador:</p>
<input type="text" name="urlcolab" id="urlcolab" size="30" /><br><br>
<input id="file_upload" name="file_upload" type="file" />
 

el problema es q no me envia al php los demas datos, en el php tengo puesto:

Código PHP:

$colab= $FILES['colab'];
$url = $FILES['urlcolab'];
 

despues otra cosa q te keria comentar, mi idea es guardar la imagen en una carpeta, y la direccion de esa imagen guardarla en una BD junto con los otros dos datos, el problema es q no se como puedo hacer para guardar la direccion de dicha foto en la BD modifike el php asi:

Código PHP:

<?php
include("conectarse.php");
$link = conectarse();
 
 
 
$nombre = $_POST['colab'];
$url = $_POST['urlcolab'];
 
 
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
    
            
        if(move_uploaded_file($tempFile,$targetFile)){
                        
                       aki es donde no se como poder guardar la ruta de la foto
 
            $sql = "INSERT INTO colaboraciones (nombre,url)";
            $sql=$sql.'VALUES ("'.$nombre.'","'.$url.'")';
            mysql_query($sql,$link);
            
            echo("datos enviados correctamente");
        }
        else{
            echo("error al guardar los datos en la BD");
        }
            
        echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);
    
}
?>
 

gracias x las posibles contestaciones q me puedas dar

[chichote]

viringas en la misma pagina del auror salen ejemplos con mas campos en el formulario.

Saludos.