Hola amigos de entredesarrolladores.
Estoy usando el plugin JQuery Upload File de hayageek para cargar archivos y a la vez enviar otros datos junto con dicho archivo, y lo que sucede es que al dar clic en guardar cambios (botón que envía el archivo y los campos de texto al servidor) me realiza 2 peticiones POST, la primera con el Array()
correspondiente a $_POST
vacío junto con el Array()
correspondiente a $_FILES
vacío también, y en la segunda petición estos 2 Array()
si llevan los datos correctamente.
Código HTML, JAVASCRIPT y PHP.
<------ HTML ------>
<div class="form-horizontal">
<input type="hidden" name="idImagen" id="idImagen" readonly="readonly">
<div class="form-group">
<label for="inputName" class="control-label col-xs-2">Titulo:</label>
<div class="col-xs-10">
<input type="name" id="tituloImagen" name="tituloImagen" class="form-control" placeholder="Titulo">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2">Imagen:</label>
<div class="col-xs-10" id="cargador">
<div id="fileuploader">Cargar imagen</div>
<p id="nota" class="col-xs-12 text-info">Nota: Si no selecciona ninguna imagen y guarda los cambios, se conservará la imagen actual.
</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-8">
<div id="btn-editar-slider-ajax" class="btn btn-success">Guardar Cambios"></div>
</div>
</div>
</div>
<----- JAVASCRIPT - PLUGIN ----->
<script type="text/javascript">
var uploadObj = $("#fileuploader").uploadFile({
url: "../controller/editarSliderAjax",
multiple: false,
allowedTypes: "png,jpg,jpeg",
fileName: "myfile",
showDelete: false,
showDone: false,
showProgress: true,
showPreview: true,
autoSubmit: false, //deshabilitar el envio del archivo automaticamente, para poder ser enviado se utiliza la función startUpload()
//Datos del formulario dinámico, estos son los datos que se envian además de las imagenes, se recuperan con
// $_POST['ID_ESPECIFICADO']
dynamicFormData:function()
{
var id = $("#idImagen").val(); //capturo el id de la imagen cargado en el input oculto
var titulo = $("#tituloImagen").val(); //capturo el titulo cargado en el input.
var data = {
idImagen: id, //id de la imagen
tituloImagen: titulo //titulo de la imagen
};
return data; //debo retornar data para poder que se envien junto con las imagenes.
},
onSuccess:function(files,data,xhr,pd) //función que se llama despues de haber subido los archivos.
{
$("#mensaje").html(data); // Mostrar la respuestas del script PHP.
},
onSubmit:function(files)
{
alert(files[0]);
}
});
</script>
<---- PHP - EditarSliderAjax ------>
<?php
require_once ("notificaciones.php");
require_once ("sliderModel.php");
$mensaje = get_error_edit_image_slider(); // mensaje de acción no exitosa.
print_r($_POST); //imprimo para saber el contenido de POST
print_r($_FILES); //imprimo para saber el contenido de FILES
if(sizeof($_POST) == 2 && isset($_POST['idImagen'], $_POST['tituloImagen'])){
$idImagen = $_POST['idImagen'];
$sliderModel = new SliderModel();
$consulta = $sliderModel->view_db_image($idImagen);
if($consulta != null){
if (isset($_FILES["myfile"])) { //verifico si viene algún archivo.
$directorioDeGuardado = "../../images/slide/";
$ret = array();
if(!is_array($_FILES["myfile"]["name"]))
{
$rutaImagenConsulta = $consulta['rutaImagen'];
if (file_exists($rutaImagenConsulta)){
unlink($rutaImagenConsulta);
$nombreArchivo = $_FILES["myfile"]["name"];
$fullPath = $directorioDeGuardado.$nombreArchivo;
$resultado = $sliderModel->update_db_dir_image_slider($idImagen, $fullPath);
if($resultado){
move_uploaded_file($_FILES["myfile"]["tmp_name"], $fullPath);
$ret[]= $nombreArchivo;
}
}
}
}
$tituloImagen = $_POST['tituloImagen'];
$tituloImagen = htmlspecialchars($tituloImagen, ENT_NOQUOTES);
$resultado = $sliderModel->update_db_title_image_slider($idImagen, $tituloImagen);
if($resultado){
$mensaje = get_success_edit_image_slider(); // obtengo el mensaje de que todo ha salido bien.
}
}
}
echo $mensaje;
?>
RESPUESTA 1:
Array
(
)
Array
(
)
<script type='text/javascript'>
$(function(){
new PNotify({
title: 'Acción No Exitosa :(',
text: 'No se ha podido editar la imagen con éxito, porfavor recarga la página e inténtalo de nuevo.',
type: 'error',
delay: 6000,
animation: 'show',
});
});
</script>
RESPUESTA 2:
Array
(
[idImagen] => 2
[tituloImagen] => Edificio Torreyana. entrada principal. :D
)
Array
(
[myfile] => Array
(
[name] => 2.jpg
[type] => image/jpeg
[tmp_name] => /Applications/XAMPP/xamppfiles/temp/php4n9xp3
[error] => 0
[size] => 174931
)
)
<script type='text/javascript'>
$(function(){
new PNotify({
title: 'Acción Exitosa',
text: 'La imagen se ha editado con éxito.<br>La página será recargada en 7 segundos.',
type: 'success',
delay: 6500,
animation: 'show',
});
});
setTimeout(function(){
location.reload();
}, 7000);
</script>
No se como puedo evitar que se envíe la primer petición donde los arreglos se encuentran vacíos.
Gracias...