0

Buenas estoy intentando enviar um formulario que tiene una imagen por jquery pero me apresenta el error: Notice: Undefined index: imagempreview in. No consigo encontar una solución.

insertar_escurcao.php

$idUsuario = $mysqli->real_escape_string($_POST['idUsuario']); $origem = $mysqli->real_escape_string ($_POST['origem']); $destino = $mysqli->real_escape_string( $_POST['destino']); $data_ida = $mysqli->real_escape_string($_POST['data_ida']); $data_volta = $mysqli->real_escape_string($_POST['data_volta']); $valor_excur = $mysqli->real_escape_string($_POST['valor_excur']); $escurname= $mysqli->real_escape_string($_POST['escurname']); $nome_hotel= $mysqli->real_escape_string($_POST['nome_hotel']);

Esta es la parte donde apresenta el error.

       $nome_img = $_FILES['imagempreview']['name'];

$horas_ida= $mysqli->real_escape_string($_POST['horas_ida']); $horas_volta= $mysqli->real_escape_string($_POST['horas_volta']); $requer_quarto = isset($_POST['requer_quarto']) ? $_POST['requer_quarto'] : 0;

if($requer_quarto >0){
$registro = registroEscurcao($idUsuario, $origem, $destino, $data_ida,$data_volta, $valor_excur, $escurname, $nome_hotel, $nome_img, $horas_ida, $horas_volta); $id_insert = $mysqli->insert_id; }

SCRIPT PARA ENVIO AL SERVIDOR

         function formexcurssao(){

            $("#btn_excurssao").click(function () {
                //Receber os dados do formulário
                var dados = $("#form_excurssao").serialize();
                $.post("insertar_escurcao.php", dados, function (retorna) {
                    $("#msgexcur").slideDown('slow').html(retorna);

                    //Limpar os campos
                    //$('#form_excurssao')[0].reset();

                    //Apresentar a mensagem leve
                    retirarMsg();
                });

            });

            //Retirar a mensagem após 1700 milissegundos
            function retirarMsg() {
                setTimeout(function () {
                    $("#msgexcur").slideUp('slow', function () {});
                       //location.reload();                 
                }, 50000);
                
            };
        };

FORMULARIO HTML esta es solo una parte del formulario por que es muy extenso.

       <!--inicio container img-->
    <div class="container2" onmouseover="imgexcurssao();">
    <div class="row"> <!--rowimg-->   
    <div class="col-xs-12 col-md-10 col-md-offset-3 col-sm-10 col-sm-offset-2"> 
       <label>Imagens</label> 
       <!-- image-preview-filename input [CUT FROM HERE]-->
        <div class="input-group image-preview">

        <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
        <span class="input-group-btn">

        <!-- image-preview-clear button -->

        <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
        <span class="fas fa-fw fa-times"></span> Apagar
        </button>

        <!-- image-preview-input -->
        <div class="btn btn-default image-preview-input">
        <span class="fas fa-fw fa-folder-open"></span>
        <span class="image-preview-input-title">Buscar</span>
        <input type="file"  name="imagempreview" id="imagempreview" accept="image/*" /> <!-- rename it -->
        </div>
        </span>
     </div><!-- /input-group image-preview [TO HERE]--> 
     </div>

     </div><!--rowimg--> 
                                   
     </div><!--fin container img-->


    
1

3 respuestas 3

0

debes usar el metodo FormData() y usar $.ajax() como en el ejemplo siguiente

<script>
var datos_form = new FormData($(".form_excurssao")[0]);

    $.ajax({
      url: "insertar_escurcao.php",
      type: "POST",
      contentType: false,
      processData: false,
      data: datos_form,
    })
    .done(function () {
      $("#msgexcur").slideDown('slow').html(retorna);

      //Apresentar a mensagem leve
      retirarMsg();
    })
    .fail(function () {
       alert('error en la conexion al servidor')
    });
</script>
1
  • gracias por tu respuesta. Pero tengo otra duda. esta parte .done(function () { $("#msgexcur").slideDown('slow').html(retorna); apresenta un error: Uncaught ReferenceError: retorna is not defined.
    – everson
    el 27 sep. 2021 a las 15:35
0

el método $.ajax() usa done como que se dispara justo en el momento que hay una devolución de datos del servidor.

este metodo done() resive un parametro que es la respuesta del servidor por tanto para que el codigo te funcione seria asi

.done(function ( retorna ) { 
  $("#msgexcur").slideDown('slow');
  $("#msgexcur").html(retorna);
}

en este caso la variable retorna tendrá todo lo que fue traído del servidor

2
  • Ola me as ayudado mucho, esta funcionando hace el registro del form con el archivo de imagen, pero me surgio otro problema y muchas dudas. Ahora qualdo salva en la tabla me aparece varios registro repetidos, tienes alguna idea de lo que pueda estar ocurriendo? e puesto una respuesta con el codigo con tus orientaciones. Desde ya agradecido por toda tu ayuda.
    – everson
    el 28 sep. 2021 a las 1:43
  • Los registros repetidos revisa que se envia una sola vez la informacion al formulario, esto lo puedes hacer en el navegador F12 > Network aqui ppuedes ver las peticiones ajax que haces a tus controladores en el servidor. Esto se podria deber a que tu codigo dispara mas eventos que envian al navegador o tambien a que el button de tu fomulario por default, en ese caso elimina el evento default del boton con event.preventDefault(), esto elimina el comprtamiento por defecto del navegador al hacer submit el 28 sep. 2021 a las 4:33
0

Script modificado pero salva en la tabla varios registros repetidos.

  function formexcurssao(){
  $("#btnform_excurssao").click(function (e) {
        e.preventDefault();
        var datos_form = new FormData($("#form_excurssao")[0]);

        $.ajax({
          url: "insertar_escurcao.php",
          type: "POST",
          contentType: false,
          processData: false,
          data: datos_form,

        })
        .done(function (retorna) {
          $("#msgexcur").slideDown('slow');
          $("#msgexcur").html(retorna);

          $('#form_excurssao')[0].reset();
          //Apresentar a mensagem leve
          retirarMsg();
        })
        .fail(function () {
           alert('error en la conexion al servidor')
        });

        //Retirar a mensagem após 1700 milissegundos
            function retirarMsg() {
                setTimeout(function () {
                    $("#msgexcur").slideUp('slow', function () {});
                                      
                }, 50000);
                
            };
});

};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.