Tengo una galería fotografica, en donde el usuario puede seleccionar las fotos de su pc y cargarlas. Cuando se sube la o las imagenes al servidor se redimensionan para que queden todas iguales.
El usuario selecciona una foto y clickea un boton "subir imagen". Se toma la foto original se la guarda en una carpeta Eventos, luego siguiendo el proceso se toma la foto y se la redimensiona para al presentarla con css me queden todas iguales, esa imagen se guarda en Resize. Osea que una misma foto se guarda dos veces en dos carpetas distinas, una es la original y otra es la redimensionada.
Hasta aca vamos bien.. el problema es el querido Ajax, no logro capturar estas rutas. Si bien logro hacerlo si se sube UNA sola imagen cuando cargo dos deja de funcionar, ni hablar más...
html:
Código HTML:
<div class="seccionImagenAgregarImagen"> <div class="seccionImagenContenedor"> <input class="file-seccionImagenes" type="file" name="mifotoNueva" id="inputFotoEvento_img" multiple> <input type="text" name="titulo" id="titulo-imagen"> <input type="hidden" name="seleccionDb" value="eventos" > <input class="seccionImagenBotonSubmit" type="submit" onclick="subirFotos('<?php echo $idMaxAjax ?>')" value="Agregar Imágen"> </div> </div>
Codigo Javascript:
Código:
Lo que sucede en php/agregoImagenes.phpfunction subirFotos(idMax , titulo)
{
var archivos = document.getElementById("inputFotoEvento_img");
var archivo = archivos.files;
var archivos = new FormData();
//alert("el id maximo es: " + idMax);
for(i = 0; i<archivo.length; i++)
{
if((parseInt(window.referenciaProxId)) == 0){
window.referenciaProxId = (parseInt(idMax)) + (parseInt(i));
}
else
{
window.referenciaProxId = window.referenciaProxId + 1;
}
/*var tituloImagen = document.getElementById('titulo-imagen').value;
var modificarTituloImagen = document.getElementById(idFoto);
modificarTituloImagen.setAttribute("title", nuevoTitulo);*/
archivos.append("eventos" + i,archivo[i]);
var inputHidden3 = document.createElement("div");
inputHidden3.setAttribute("id", "cadaImagen"+window.referenciaProxId);
inputHidden3.setAttribute("class", "cadaImagen");
var ide3 = document.getElementById("centrar-seccion-img-definitivo");
ide3.appendChild(inputHidden3);
var ideDivCadaImagen = document.getElementById("cadaImagen"+window.referenciaProxId);
ideDivCadaImagen = document.createElement("a");
ideDivCadaImagen.setAttribute("id", window.referenciaProxId);
ideDivCadaImagen.setAttribute("class", "fancybox");
ideDivCadaImagen.setAttribute("href", "link de imagen chica");
ideDivCadaImagen.setAttribute("rel" , "group");
ideDivCadaImagen.setAttribute("title", "");
ideDivCadaImagen.setAttribute("name", "imgGrande");
var ide4 = document.getElementById("cadaImagen"+ window.referenciaProxId );
ide4.appendChild(ideDivCadaImagen);
var ideImg = document.createElement("img");
ideImg.setAttribute("class", "imgTotales anime");
ideImg.setAttribute("title", "");
ideImg.setAttribute("src", "link de imagen chica");
ideImg.setAttribute("name", "imgChica");
ideImg.setAttribute("id", "imgChicaGaleria"+window.referenciaProxId);
var ide6 = document.getElementById(window.referenciaProxId);
ide6.appendChild(ideImg);
var ide5 = document.getElementById("cadaImagen"+window.referenciaProxId);
var divPanelEdicion = document.createElement("div");
divPanelEdicion.setAttribute("class" , "panel-edicion");
divPanelEdicion.setAttribute("id" , "divPanel"+window.referenciaProxId );
ide5.appendChild(divPanelEdicion);
var eliminacionSpan = document.createElement("span");
eliminacionSpan.setAttribute("class" , "icon-bin2 anime");
eliminacionSpan.setAttribute("title" , "eliminar");
eliminacionSpan.setAttribute("onclick" , "funcion()");
var ide5 = document.getElementById("divPanel"+window.referenciaProxId);
ide5.appendChild(eliminacionSpan);
var edicionTitulo = document.createElement("span");
edicionTitulo.setAttribute("class" , "icon-pushpin push2 anime");
edicionTitulo.setAttribute("title" , "Editar Título");
edicionTitulo.setAttribute("onclick" , "toggle_visibility('EditarTitulo'," + window.referenciaProxId + ",'' , '' , 'true')");
var ide6 = document.getElementById("divPanel"+window.referenciaProxId);
ide6.appendChild(edicionTitulo);
//Agregar Titulo en el cuado de edicion de titulo,
}
$.ajax({
url: "php/agregoImagenes.php",
type: 'POST',
contentType: false,
data: archivos,
processData:false,
cache:false
}).done(function(msg){
mensajeFinal(msg);
});
}
//Aca quiero mostrar las rutas
function mensajeFinal(msg)
{
alert(msg);
var response = JSON.parse(msg);
alert(response.length);
for(var i = 0; i< response.length ; i++){
var imagenChicaGaleria = document.getElementById("imgChicaGaleria"+(window.referenciaProxId + i));
imagenChicaGaleria.setAttribute("src", response[i++]);
var imagenGrandeGaleria = document.getElementById(window.referenciaProxId);
imagenGrandeGaleria.setAttribute("href", response[i]); }
}
Código PHP:
include("funciones.php");
include("../sql/_setup.php");
/*if(isset($_FILES["mifotoNueva"]) && isset($_POST["seleccionDb"]))
{
$tipoLogo = $_FILES["mifotoNueva"]["type"];
$archivoLogo = $_FILES["mifotoNueva"]["tmp_name"];
$nombre = mktime();
$seleccionDb = $_POST["seleccionDb"];
$titulo = $_POST["titulo"];
$destino ="../fotos/generales/Eventos";
$se_subieron_imagenes = subir_imagen_panel_imagenes($tipoLogo, $archivoLogo, $nombre, $seleccionDb , $titulo);
header("Location: ../index.php?op=imagenesEventosEdit");*/
$ruta = "../fotos/generales/Eventos/";
foreach($_FILES as $key)
{
if($key["error"] == UPLOAD_ERR_OK )
{ $tipo = $key["type"];
$NombreOriginal = $key["name"];
$archivo = $key["tmp_name"];
$nombre = $NombreOriginal;
$seleccionDb = "eventos";
$titulo = "";
$mensaje = array();
$mensaje = subir_imagen_panel_imagenes($tipo, $archivo, $nombre , $seleccionDb , $titulo ,$conexion);
echo json_encode($mensaje);
}
if($key["error"] != "")
{
$mensaje .= 'No se pudo subir el archivo <b>'.$NombreOriginal.'</b> Debido al siguiente error \n'. $key["error"];
}
}
function subir_imagen_panel_imagenes($tipo , $imagen , $nombre , $seleccionDb, $titulo , $conexion)
{
if(strstr($tipo, "image")){
if(strstr($tipo, "jpeg"))
$extension = ".jpg";
if(strstr($tipo, "gif"))
$extension = ".gif";
if(strstr($tipo, "png"))
$extension = ".png";
if($seleccionDb == "eventos"){
$destino ="../fotos/generales/Eventos/".$nombre.$extension;
$destinodb ="fotos/generales/Eventos/".$nombre.$extension;
move_uploaded_file($imagen, $destino) or die("No se pudo subir la imagen al servidor");
$wthumb = 800;
$hthumb = 800;
header('Content-Type:image/png');
$imagenreszize = "../fotos/generales/Eventos/Resize/ResizeProp/".$nombre.$extension;
$destinofinal = "../fotos/generales/Eventos/Resize/".$nombre.$extension;
$traerdedb = "fotos/generales/Eventos/Resize/".$nombre.$extension;
$imagenresizeprop = "../fotos/generales/Eventos/Resize/ResizeProp/".$nombre.$extension;
ak_img_resize( $destino , $imagenresizeprop ,$wthumb, $hthumb, $extension );
ak_img_thumb( $imagenreszize , $destinofinal ,500, 500, $extension );
eliminarResize($imagenresizeprop);
$archivos = array();
$archivos[] = $traerdedb;
$archivos[] = $destinodb;
$consulta = "INSERT INTO eventos SET ARCHIVO = '$destinodb' , TITULO = '$titulo' , IMAGENCHICA = '$traerdedb' ";
mysqli_query($conexion,$consulta);
}else if($seleccionDb == "VIAJES")
{
}
}else{
return false;
}
return $archivos;
}
Cuando desde el servidor me manda una sola ruta el JSON.parse(msg) anda perfecto! pero si cargo dos fotos no! me salta este error: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 121 of the JSON data
no se como solucionarlo la verdad... porque necesito ambas rutas de cada imagen que se suba.
