entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Hayageek JQuery Upload File Plugin envía 2 peticiones POST

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...

0voto

white comentado

Hola @admont28, podrías agregar las etiquetas entre <head> y </head>?
tambien especifica si las 2 peticiones son vía ajax, es decir si las 2 se envian sin recargar la página.

PD: agrega este codigo:

if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) ||  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
    die('bad request');
}

antes de require_once ("notificaciones.php"); y nos dices que sucedió

0voto

admont28 comentado

Hola @white, las 2 peticiones son vía ajax.

mi contenido entre <head> y </head> aparte de otros plugins, estilos CSS se encuentra:

<!-- Script para capturar las acciones de los botones en formularios -->
<script type="text/javascript" src="../../js/botones.js" ></script>

dicho script contiene el código javascript que agregué en mi pregunta, estando dentro de $(document).ready(function() {......}.

Agregué el código que me pasaste antes de require_once ("notificaciones.php"); y sigo recibiendo las 2 respuestas: Imagen Firebug

0voto

white comentado

Qué otros plugins? el codigo de botones.js es completamente el que tienes en tu pregunta?

Con el código que pones no encuentro ni puedo intuir de donde viene el problema. es posible que hayas registrado un evento dos veces.

si es posible agrega el codigo fuente de tu pagina ya procesada http://chopapp.com/

0voto

admont28 comentado

Mi código en botones.js es bastante extenso, me dediqué a verificar que todo este correcto y me encuentro con un error que me da hasta pena decir jajaja, mucho más arriba de donde estaba efectuando mi

$('#btn-editar-slider-ajax').click(function(){    
        uploadObj.startUpload();
});

me encontré con que tenía otro llamado cuando se realizaba click en el botón, y este llamado estaba haciendo la misma petición ajax al mismos archivo php pero de diferente forma a como lo hace el plugin, así que la solución fue borrar dicha función.

Muchas gracias por tu tiempo gastado en mi problema, pero me habéis ayudado bastante!

Saludos!

1 Respuesta

0voto

admont28 Puntos910

La respuesta es bastante simple pero muy penosa de decir;

Igualmente acá la publico porque no puedo eliminar la pregunta.

Lo que sucedía es que en alguna parte de todo mi código Javascript se estaba efectuando otra acción:

$('#btn-editar-slider-ajax').click(function(){.....}

Realizando casi la misma petición ajax pero difiriendo en algunas cosas, así que bastó con solo eliminar la función sobrante. :)

Saludos..

0voto

white comentado

me alegro se haya resuelto, como supuse era un evento registrado dos veces.

saludos!

0voto

admont28 comentado

OH! que forma de intuir :)

Gracias nuevamente.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta