Foros del Web » Programando para Internet » Javascript » Frameworks JS »

drag & drop de foto con mas datos

Estas en el tema de drag & drop de foto con mas datos en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/07/2011, 03:42
 
Fecha de Ingreso: marzo-2011
Mensajes: 226
Antigüedad: 9 años, 6 meses
Puntos: 1
drag & drop de foto con mas datos

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
  1. <p class="titulo">
  2.                 ALTA DE UN NUEVO COLABORADOR.
  3. </p>
  4. <br>
  5. <br>    
  6. <form method="post" action="enviaDatosAltaColab.php" id="formAltaColab" class="texto2">
  7. nombre del colaborador:
  8. <input type="text" name="colab" id="colab" size="25" class=":required :only_on_submit" /> <br><br>
  9. direccion web del colaborador:
  10. <input type="text" name="urlcolab" id="urlcolab" size="25" class=":required :only_on_submit" /> <br><br>    
  11. <input type="image" src="img/bt_login.png" id="btsend" name="btsend" class="btsend"/>
  12. </form>
  13.  
  14.    
  15. <br /><br /><br />
  16. <div id="dropbox"><span id="droplabel">Suelta imagen aqui...</span>
  17.    
  18. </div>
  19.  
  20. <br/>
  21. <i>¿es este el logo que quieres subir?</i>
  22. <img id="preview" alt=" no archivo" src="" style="width:20px; height:20px;"/>
  23.  
  24.  
  25. <div class="msg" style="display:none;" >
  26.     <p class="texto">
  27.         COLABORADOR/INSTITUCION AÑADIDO/A SATISFACTORIAMENTE.
  28.     </p>
  29. </div>

este es el script q tengo para enviar dos datos sin la imagen:
Código Javascript:
Ver original
  1. <script>
  2.  
  3. $("#formAltaColab").submit(function(event){
  4. event.preventDefault();
  5.  
  6.     $.ajax({
  7.         type: "POST",
  8.         url: "enviaDatosAltaColab.php",
  9.         data: $("#formAltaColab").serialize(),
  10.         success: function(){
  11.             $("#formAltaColab").hide(function(){$('div.msg').fadeIn('slow').fadeOut(6000);});  
  12.             $("#flotante").fadeOut(4000);
  13.         }  
  14.     });
  15. });
  16.  
  17. </script>

y este es el otro escript q hace q funcione el drag and drop
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. }

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

Etiquetas: ajax, drag, drop, foto, html, php, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:42.