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