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

Duda Subir multiple img con FormData y Ajax PHP

Estas en el tema de Duda Subir multiple img con FormData y Ajax PHP en el foro de Frameworks JS en Foros del Web. Este script pretende subir multiple imagenes y hacer un preview de cada una. Nó queiro un framwork de upload hací que tome de varias partes ...
  #1 (permalink)  
Antiguo 22/07/2013, 18:08
 
Fecha de Ingreso: octubre-2011
Ubicación: Tierra
Mensajes: 64
Antigüedad: 9 años
Puntos: 0
Duda Subir multiple img con FormData y Ajax PHP

Este script pretende subir multiple imagenes y hacer un preview de cada una.
Nó queiro un framwork de upload hací que tome de varias partes código y lo organicé.
Cuando subo el primer(1) archivo lo sube normal, bien, pero al segundo(1) me suben 2y despues me suben el doble, eltriple y hací sucesivamente.

He tratado toda la tarde de encontrar el error pero no he podido del porque se buggea despues de la segunda subida:

el html:
Código HTML:
Ver original
  1. <form enctype="multipart/form-data" id="formSub">
  2.   <input type="text" id="inputCedID" name="inputCed" class="campo">
  3.   <input type="file" class="pic" id="pic" name="pic[]" multiple />
  4.   <button type="button" class="boton" id="subir">Subir</button>
  5. </form>
script.js:
Código Javascript:
Ver original
  1. $(document).on('ready', function(){
  2.     var formData = false;
  3.     var MAX_WIDHT = 200, MAX_HEIGHT = 200;
  4.  
  5.     function handleImageSelect(src, thefile, output){
  6.         console.log('llegue a handleimagselect');
  7.         var span = document.createElement('span');
  8.         span.innerHTML = ['<img class="thumb" src="', src, '" width="100" height="100" />'].join('');
  9.         document.getElementById('thumbnail').insertBefore(span, null);
  10.  
  11.         //hacemos las miniaturas.
  12.         output.push('<li><strong>', escape(thefile.name), '</strong> (', thefile.type || 'n/a', ') -',
  13.         thefile.size, '</li>');
  14.         document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  15.     }
  16.  
  17.     function handleFileSelect(evt){
  18.         var output = [];
  19.         $('#thumbnail').children().remove();
  20.         if(window.FormData){
  21.             formData = new FormData();
  22.         }
  23.         var files = evt.target.files; // FileList object
  24.         document.getElementById('response').innerHTML ='Cargando imagenes.';
  25.         for(var i = 0, f; f = files[i]; i++){
  26.             //solo procesa iamgenes.
  27.             if (!f.type.match(/image.*/)) {
  28.                 alert('El archivo no corresponde al tipo de una imagen.');
  29.                 continue;
  30.             }
  31.  
  32.             if(window.FileReader){
  33.                 var reader = new FileReader();
  34.  
  35.                 //capturamos la informacion.
  36.                 reader.onload = (function(thefile){
  37.                     return function(e) {
  38.                         handleImageSelect(e.target.result, thefile, output);
  39.                     };
  40.                 })(f);
  41.                 reader.readAsDataURL(f);
  42.                 formData.append('pic[]', f);
  43.                 var ced = $('#inputCedID').val();
  44.  
  45.                 document.getElementById('subir').addEventListener('click', function(){
  46.                     $.ajax({
  47.                         url: 'upload.php',
  48.                         type: 'POST',
  49.                         data: formData,
  50.                         processData: false,
  51.                         contentType: false,
  52.                         beforeSend: function() {
  53.                             console.log("formData === " + formData);
  54.                             console.log(formData);
  55.                             document.getElementById('response').innerHTML = '<img src="cargando.gif" height="30">';
  56.                         },
  57.                         complete: function(xhr, res){
  58.                             console.log('la llamada fue: ' + res);
  59.                         },
  60.                         success: function(res){
  61.                             document.getElementById('response').innerHTML = res;
  62.                             console.log('respuesta: ' + res);
  63.                         },
  64.                         error: function (xhr, ajaxOptions, thrownError) {
  65.                             console.log('error: ' + xhr.status);
  66.                             console.log('error2: ' + thrownError);
  67.                         }
  68.                     });
  69.                 });
  70.             }
  71.             else{
  72.                 console.log('Su navegador no soporta window.FileReader');
  73.             }
  74.         }
  75.     }
  76.        
  77.      document.getElementById('pic').addEventListener('change', handleFileSelect, false);
  78.  
  79. });
y del lado del cliente upload.php:
Código PHP:
Ver original
  1. <?php
  2.    
  3.     include('../conexion.php');
  4.     $count = count($_FILES['pic']['name']);
  5.     echo "<br>count: ". $count .".</br>";
  6.     function tipoImgen($file){
  7.         $file_types = array('jpeg','gif','png','tiff');
  8.         if($img = getimagesize($file)){
  9.             if(in_array(str_replace('image/', '', $img['mime']), $file_types))
  10.                 return $img;
  11.         }
  12.         return false;
  13.     }
  14.  
  15.     for($i = 0; $i < $count; $i++) {
  16.         echo '<div class="resultUploadImg">';
  17.         if(!empty($_FILES['pic']['name'][$i])) {
  18.             if(tipoImgen($_FILES['pic']['tmp_name'][$i])){
  19.                 //Obtiene name del file y asigna uno nuevo
  20.                     $fileName = $_FILES['pic']['name'][$i];
  21.                     $tmp_name = $_FILES['pic']['tmp_name'][$i];
  22.                     $newdir = "BDimg/";
  23.                     $destruye = explode('.', $fileName);
  24.                     $ext = $destruye[1];
  25.  
  26.                         //obtenemos el ultimo ID en la BD
  27.                         $result = $mysqli->query("SELECT MAX(id) AS id FROM imagenes");
  28.                         $row = $result->fetch_array(MYSQLI_ASSOC);
  29.                         $id = $row['id'];
  30.                         $nombre = $id + 1;
  31.                         //_____________________________________________________________
  32.                    
  33.                     echo "<br>ultimo id DataBase: ". $id."</br>";
  34.                     echo "<br>nuevo nombre: ".$nombre."</br>";
  35.                        
  36.                     $nombreN = $nombre.'.'.$ext;
  37.                     $nombrefinal = $newdir.$nombre.'.'.$ext;
  38.                 //_____________________________________________________________
  39.  
  40.                 //mueve el archivo a su ruta final
  41.                     if(move_uploaded_file($tmp_name, "$nombrefinal")){
  42.                         echo '<br>Image: '.$nombre.'.'.$ext.' quedo guardado en BDimg/'.$nombreN.'<br />';
  43.  
  44.                         //insertamos los datos  al DB
  45.                             $result2 = $mysqli->query("INSERT INTO imagenes (ruta) VALUES ('$nombrefinal')");
  46.                             $ultimoID = $mysqli->insert_id;
  47.                             echo "<br>ultimoID = " . $ultimoID."</br>";
  48.                         //_____________________________________________________________
  49.                     }
  50.                     else {
  51.                         echo "no se ha podido mover";
  52.                     }
  53.                 //_____________________________________________________________
  54.             }
  55.         }
  56.         echo "</div>";
  57.     }  
  58. ?>

Etiquetas: ajax, javascript, jquery
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 12:08.