1

pues resulta que tengo un formulario a enviar con ajax el cual contiene una serie de campos además una imagen y no se como enviar la imagen para que las procese el servidor os pongo el código que llevo hasta ahora... Me lo envía todo correcto menos la imagen que no se como...

$(document).ready(function() {

$( "#anadir" ).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,

    buttons: {
    "guardar": function() {		
        $.get("peli.php", {
            titulo : $("#atitulo").val(),
            director : $("#adirector").val(),
            fecha: $("#afecha").val(),
            idgenero: $("#agenero").val(),
            operacion: "nuevo"
        },function(data,status){				
            $("#listar").html(data);
          
        })//get			
                
        $(this).dialog( "close" );												
                },
    "Cancelar": function() {
       
            $(this).dialog( "close" );
       
    }


    
    }//buttons*/
});			
//accion añadir pelicula
$(document).on("click","#anadirBoton",function(){
    $("#formularioanadir")[0].reset();
$( "#anadir").dialog("open");
});	//fin añadir pelicula



}
<form id="formularioanadir" enctype="multipart/form-data">
titulo pelicula: <input type="text" id="atitulo" name="titulo"  value=""  required/><br>
director: <input type="text" id="adirector" value="" required /><br>
genero: <select id="agenero">
<?php
$consulta = "SELECT idGenero, genero
			FROM genero";
$res = $lnk->query($consulta);
while ($fila2 = $res->fetch_object()){?>
<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>
<?php } ?>
</select>
<br>
fecha:  <input type="text" id="afecha"  value="" required/>
imagen  <input type="file" id="afile"  value="" required/>

<!--<input type="file" name="file" value="subir archivo">-->
</form>

4
  • Estás usando jQuery UI ?? Ese plugin de jQuery es el que tiene la función dialog el 7 jun. 2018 a las 15:20
  • si lo estoy utilizando.
    – trevol
    el 7 jun. 2018 a las 15:20
  • No veo que mandes el contenido de afile
    – alanfcm
    el 7 jun. 2018 a las 15:31
  • es lo que intento no se hacerlo
    – trevol
    el 7 jun. 2018 a las 15:56

4 respuestas 4

2

Ya lo conseguí, tenía varios fallos: El primero es que no lo mandaba por post luego el php también lño tenía equivocado pongo el código completo y funcional para que se pueda utilizar o consultar.

introducir el código aquí

$( "#anadir" ).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,

    buttons: {
		

        "guardar": function() {
            var file_data = $('#afile').prop('files')[0];   
            var form_data = new FormData();                  
            form_data.append('afile', file_data);
            form_data.append('titulo', $("#atitulo").val());
            form_data.append('director', $("#adirector").val());
            form_data.append('fecha', $("#afecha").val());
            form_data.append('idgenero', $("#agenero").val());
            form_data.append('operacion', "nuevo");
                                  
            $.ajax({
                url: 'peli1.php', 
                type: 'post',
                dataType: 'html',
                data: form_data ,                         
                processData:false,
                cache:false,
                contentType: false,
                success: function(data, textStatus, jqXHR){
                    $("#listar").html(data);
                   
                }
             })
             
        $(this).dialog( "close" );												
            },

    "Cancelar": function() {
       
            $(this).dialog( "close" );
       
    }

 }
  

});
$(document).on("click","#anadirBoton",function(){
    $("#formularioanadir")[0].reset();
$( "#anadir").dialog("open");
});	//fin añadir pelicula
<form  id="formularioanadir" enctype="multipart/form-data" method="post">
titulo pelicula: <input type="text" id="atitulo" name="titulo"  value=""  required/><br>
director: <input type="text" id="adirector" value="" required /><br>
genero: <select id="agenero">
<?php
$consulta = "SELECT idGenero, genero
			FROM genero";
$res = $lnk->query($consulta);
while ($fila2 = $res->fetch_object()){?>
<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>
<?php } ?>
</select>
<br>
fecha:  <input type="text" id="afecha"  value="" required/>
imagen  <input type="file" id="afile" name="afile"  required/>

<!--<input type="file" name="file" value="subir archivo">-->
</form>







este sería en archivo php pali1.php

<?php


$archivo =  $_FILES['afile'];
    if ($_FILES['afile']['error'] == 0) {
        // Donde se va a guardar el fichero (la imagen)
        move_uploaded_file($_FILES['afile']['tmp_name'], 'uploads/'.$_FILES['afile']['name']);
    }
        $titulo = $_POST['titulo'];
        $director = $_POST['director'];
        $fecha = $_POST['fecha'];
        $genero =  $_POST['idgenero'];


        echo $titulo , $director, $fecha,  $genero;

?>

0

Utiliza jquery para enviar el formulario.

Esto en Javascript

"guardar": function() {
    var file_data = $('#afile').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('afile', file_data);
    form_data.append('titulo', $("#atitulo").val());
    form_data.append('director', $("#adirector").val());
    form_data.append('fecha', $("#afecha").val());
    form_data.append('idgenero', $("#agenero").val());
    form_data.append('operacion', "nuevo");
    alert(form_data);                             
    $.ajax({
        url: 'peli.php', 
        dataType: 'text',
        data: form_data,                         
        type: 'post',
        processData:false,
        cache:false,
        contentType: false,
        success: function(data){
            $("#listar").html(data);
        }
     });
} //Fin de la funcion "guardar"

Esto en PHP

if (isset($_FILES)) { // Verificar si se esta enviando algun fichero
    if ($_FILES['afile']['error'] > 0) {
        // Donde se va a guardar el fichero (la imagen)
        move_uploaded_file($_FILES['afile']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }
}

Y continuas con el codigo

2
  • me da este error Undefined index: afile in C:\xampp\htdocs\peliculas\peli.php on line 32
    – trevol
    el 7 jun. 2018 a las 15:49
  • @trevol falto omitir la cache y el tipo de contenido. Verifica la respuesta que he editado.
    – DMA VE
    el 7 jun. 2018 a las 16:11
0

Te acabo de armar un ejemplo donde podrás enviar los datos del formulario y una imagen adjunta de forma conjunta. Lo importante es capturar la imagen con el evento onChange para incorporarla al objeto FormData().

Luego añades las variables que necesites del formulario al objeto FormData y los envías con una petición Ajax con las propiedades "contentType" y "processData" con valor false. Esto es para poder enviar la imagen sin procesar (se pierde).

Puedes revisar el response en el ejemplo.

$(document).ready(function() {
    
    // Obtener imagen seleccionada
    var archivo = null;
    
    $('#imagen').on('change', function(event) {
        archivos = event.target.files;
        archivo = archivos[0];
    });

    // Enviar formulario
    $('#enviar').on('click touchend', function() {
        
        // Objeto FormData para almacenar los datos
        var datos = new FormData();
        
        // Guardar la informacion del archivo para enviar
        datos.append("imagen", archivo);        
        datos.append("nombre", $('#nombre').val());

        jQuery.ajax({
            url:          "https://tiendasdigitales.net/peticion.php",
            type:         'POST',
            cache:        false,
            data:         datos,
            dataType:     'html',
            contentType:  false, // Importante
            processData:  false, // Importante
            success: function(data, textStatus, jqXHR) {
                // Exito
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario">
  <input type="text" placeholder="Nombre" id="nombre">
  <input type="file" id="imagen">
  <input type="button" id="enviar" value="Enviar">
</form>

2
  • El problema de lo que me acabas de armar es que no se adaptarlo jquery ui.
    – trevol
    el 7 jun. 2018 a las 18:13
  • De todas formas gracias.
    – trevol
    el 7 jun. 2018 a las 18:13
0

ahora tengo esto y no me responde ni me sube

$( "#anadir" ).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,

    buttons: {
		

"guardar": function() {
            var file_data = $('#afile').prop('files')[0];   
            var form_data = new FormData();                  
            form_data.append('afile', file_data);
            form_data.append('titulo', $("#atitulo").val());
            form_data.append('director', $("#adirector").val());
            form_data.append('fecha', $("#afecha").val());
            form_data.append('idgenero', $("#agenero").val());
            form_data.append('operacion', "nuevo");
                                   
            $.ajax({
                url: 'peli.php', 
                type: 'get', 
                cache: false,
                data: form_data,                         
                dataType:     'html',
                contentType:  false, // Importante
                processData:  false, // Importante
                success: function(data) {
                    $("#listar").html(data);
                }
             });
     
                
        $(this).dialog( "close" );												
                },
    "Cancelar": function() {
       
            $(this).dialog( "close" );
       
    }

nada no se donde estará el fallo`

1
  • Lo acabo de conseguir gracias pero e intentado darte puntuación pero no puedo.
    – trevol
    el 7 jun. 2018 a las 22:19

Tu Respuesta

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

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