Duda Subir multiple img con FormData y Ajax PHP

[juanvc123]

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:

<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>";
    }   
?>