Comunidad de diseño web y desarrollo en internet online

Duda Subir multiple img con FormData y Ajax PHP

Citar            
MensajeEscrito el 23 Jul 2013 12:12 am
Vista Previa
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 2 me suben el doble.

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 :

<form enctype="multipart/form-data" id="formSub">
  <input type="text" id="inputCedID" name="inputCed" class="campo">
  <input type="file" class="pic" id="pic" name="pic[]" multiple />
  <button type="button" class="boton" id="subir">Subir</button>
</form>

script.js:

Código Javascript :

$(document).on('ready', function(){
    var formData = false;
    var MAX_WIDHT = 200, MAX_HEIGHT = 200;

    function handleImageSelect(src, thefile, output){
        console.log('llegue a handleimagselect');
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', src, '" width="100" height="100" />'].join('');
        document.getElementById('thumbnail').insertBefore(span, null);

        //hacemos las miniaturas.
        output.push('<li><strong>', escape(thefile.name), '</strong> (', thefile.type || 'n/a', ') -',
        thefile.size, '</li>');
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    function handleFileSelect(evt){
        var output = [];
        $('#thumbnail').children().remove();
        if(window.FormData){
            formData = new FormData();
        }
        var files = evt.target.files; // FileList object
        document.getElementById('response').innerHTML ='Cargando imagenes.';
        for(var i = 0, f; f = files[i]; i++){
            //solo procesa iamgenes.
            if (!f.type.match(/image.*/)) {
                alert('El archivo no corresponde al tipo de una imagen.');
                continue;
            }

            if(window.FileReader){
                var reader = new FileReader();

                //capturamos la informacion.
                reader.onload = (function(thefile){
                    return function(e) {
                        handleImageSelect(e.target.result, thefile, output);
                    };
                })(f);
                reader.readAsDataURL(f);
                formData.append('pic[]', f);
                var ced = $('#inputCedID').val();

                document.getElementById('subir').addEventListener('click', function(){
                    $.ajax({
                        url: 'upload.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            console.log("formData === " + formData);
                            console.log(formData);
                            document.getElementById('response').innerHTML = '<img src="cargando.gif" height="30">';
                        },
                        complete: function(xhr, res){
                            console.log('la llamada fue: ' + res);
                        },
                        success: function(res){
                            document.getElementById('response').innerHTML = res;
                            console.log('respuesta: ' + res);
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            console.log('error: ' + xhr.status);
                            console.log('error2: ' + thrownError);
                        }
                    });
                });
            }
            else{
                console.log('Su navegador no soporta window.FileReader');
            }
        }
    }
        
     document.getElementById('pic').addEventListener('change', handleFileSelect, false);
 
});

y del lado del cliente upload.php:

Código PHP :

<?php
   
   include('../conexion.php');
   $count = count($_FILES['pic']['name']);
   echo "<br>count: ". $count .".</br>"; 
   function tipoImgen($file){
      $file_types = array('jpeg','gif','png','tiff');
      if($img = getimagesize($file)){
         if(in_array(str_replace('image/', '', $img['mime']), $file_types))
            return $img;
      }
      return false;
   }

   for($i = 0; $i < $count; $i++) {
      echo '<div class="resultUploadImg">';
      if(!empty($_FILES['pic']['name'][$i])) { 
         if(tipoImgen($_FILES['pic']['tmp_name'][$i])){
            //Obtiene name del file y asigna uno nuevo
               $fileName = $_FILES['pic']['name'][$i];
               $tmp_name = $_FILES['pic']['tmp_name'][$i];
               $newdir = "BDimg/";
               $destruye = explode('.', $fileName);
               $ext = $destruye[1];

                  //obtenemos el ultimo ID en la BD 
                  $result = $mysqli->query("SELECT MAX(id) AS id FROM imagenes");
                  $row = $result->fetch_array(MYSQLI_ASSOC);
                  $id = $row['id'];
                  $nombre = $id + 1;
                  //_____________________________________________________________
               
               echo "<br>ultimo id DataBase: ". $id."</br>";
               echo "<br>nuevo nombre: ".$nombre."</br>";
                  
               $nombreN = $nombre.'.'.$ext;
               $nombrefinal = $newdir.$nombre.'.'.$ext;
            //_____________________________________________________________

            //mueve el archivo a su ruta final
               if(move_uploaded_file($tmp_name, "$nombrefinal")){
                  echo '<br>Image: '.$nombre.'.'.$ext.' quedo guardado en BDimg/'.$nombreN.'<br />';

                      //insertamos los datos  al DB
                         $result2 = $mysqli->query("INSERT INTO imagenes (ruta) VALUES ('$nombrefinal')");
                         $ultimoID = $mysqli->insert_id;
                         echo "<br>ultimoID = " . $ultimoID."</br>";
                      //_____________________________________________________________
               }
               else {
                  echo "no se ha podido mover";
               }
            //_____________________________________________________________
         }
      }
      echo "</div>";
   }   
?>

Por juanvc123

Claber

415 de clabLevel

5 tutoriales

Genero:Masculino  

developer

chrome
Citar            
MensajeEscrito el 23 Jul 2013 02:15 pm
y si revisas ya una libreria como , plupload

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.