Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/08/2011, 04:10
viringas
 
Fecha de Ingreso: marzo-2011
Mensajes: 226
Antigüedad: 13 años, 1 mes
Puntos: 1
subir imagen arrastrando y soltando

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
  1. $(document).ready(function() {
  2.     var dropbox = document.getElementById("dropbox")
  3.  
  4.     // init event handlers
  5.     dropbox.addEventListener("dragenter", dragEnter, false);
  6.     dropbox.addEventListener("dragexit", dragExit, false);
  7.     dropbox.addEventListener("dragover", dragOver, false);
  8.     dropbox.addEventListener("drop", drop, false);
  9.  
  10. });
  11.  
  12. function dragEnter(evt) {
  13.     evt.stopPropagation();
  14.     evt.preventDefault();
  15. }
  16.  
  17. function dragExit(evt) {
  18.     evt.stopPropagation();
  19.     evt.preventDefault();
  20. }
  21.  
  22. function dragOver(evt) {
  23.     evt.stopPropagation();
  24.     evt.preventDefault();
  25. }
  26.  
  27. function drop(evt) {
  28.     evt.stopPropagation();
  29.     evt.preventDefault();
  30.  
  31.     var files = evt.dataTransfer.files;
  32.     var count = files.length;
  33.  
  34.     // Only call the handler if 1 or more files was dropped.
  35.     if (count > 0)
  36.         handleFiles(files);
  37. }
  38.  
  39.  
  40. function handleFiles(files) {
  41.     var file = files[0];
  42.  
  43.     document.getElementById("droplabel").innerHTML = "imagen guardada";
  44.  
  45.     var reader = new FileReader();
  46.  
  47.    
  48.     reader.onloadend = handleReaderLoadEnd;
  49.  
  50.     // begin the read operation
  51.     reader.readAsDataURL(file);
  52. }
  53.  
  54.  
  55.  
  56. function handleReaderLoadEnd(evt) {
  57.     var img = document.getElementById("preview");
  58.     img.src = evt.target.result;
  59. }

la imagen la deposita en esta etiketa <img>
Código HTML:
Ver original
  1. <div id="dropbox"><span id="droplabel">Suelta imagen aqui...</span>
  2.    
  3. </div>
  4.  
  5. <br/>
  6. <i>¿es este el logo que quieres subir?</i>
  7. <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?