0

Tengo un formulario el cual contiene campo de texto y un campo file para subir imágenes los cuales envío mediante AJAX.

¿Cómo puedo serializar tanto el input file como el input text para enviar los dos datos a la vez?

He serializado el campo de texto y también el FormData para el input fil, pero solo me permite enviar 1 archivo, o el texto o el input file.

Esto es lo que he intentado:


$("form").on("submit",function(e){

               var form = $(this).serialize();
               var imagen = new FormData($("#formdata")[0]);

                $.ajax({

                    type:'post', 
                    url:'enviar.php',
                    data:imagen,
                    contentType:false,
                    processData:false

                })
                .done(function(valor){

                    alert(valor);

                })
                .fail(function(data){

                    alert("Error");
                })




               e.preventDefault();
           });

<form action="enviar.php" method="post" enctype="multipart/form-data"  id="formdata">

        <table border="1px">
            <tr>
                <td>Titulo</td>
                <td><input type="text" name="titulo"></td>
            </tr>
            <tr>
                <td>Contenido</td>
                <td><textarea name="mensaje" id="" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td>Insertar Imagen</td>
                <td><input type="file" name="archivo" /></td>
            </tr>
        </table>
        <br><br>
        <table border="1px">
            <thead>
                <th>ID</th>
                <th>Nombre</th>
                <th>Actualizar</th>
                <th>Eliminar</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Nombre</td>
                    <td><a href="actualizar.php">Actualizar</a></td>
                    <td><a href="eliminar.php">Eliminar</a></td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <input type="submit" value="Insertar" />
    </form>
3
  • este es mi codigo HTML Commented el 23 jul. 2017 a las 15:29
  • 1
    Bienvenido. Favor de evitar las cortesías sociales como saludos, despedidas ya que este sitio no es un foro sino un espacio para construir una base de conocimiento sobre ciertas temáticas. Favor de seguir el recorrido de bienvenida, y de paso ganas fácilmente tu primera medalla, y lee Cómo preguntar.
    – Rubén
    Commented el 23 jul. 2017 a las 15:34
  • 1
    ¿No funciona con este código: data : $(this).serialize()? ¿Qué error te muestra en la consola JS del navegador? Commented el 23 jul. 2017 a las 15:56

2 respuestas 2

5

El problema es que no estas enviando los datos serializados.

Como se trata de enviar una imagen y contenido serializado del formulario, tendremos que usar la funcion serializeArray() para enviar todo el contenido en un solo Array;

$("form").on("submit",function(e){
  e.preventDefault(); 
     
      var datos = $(this).serializeArray(); //datos serializados
      var imagen = new FormData($("#formdata")[0]);

      //agergaremos los datos serializados al objecto imagen
      $.each(datos,function(key,input){
        imagen.append(input.name,input.value);
      });
      
      $.ajax({
       type:'post', 
       url:'enviar.php',
       data:imagen, //enviamos imagen
       contentType:false,
       processData:false
     }).done(function(valor){
       alert(valor);
       
     }).fail(function(data){
        alert("Error");
        
     });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="enviar.php" method="post" enctype="multipart/form-data"  id="formdata">

        <table border="1px">
            <tr>
                <td>Titulo</td>
                <td><input type="text" name="titulo"></td>
            </tr>
            <tr>
                <td>Contenido</td>
                <td><textarea name="mensaje" id="" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td>Insertar Imagen</td>
                <td><input type="file" name="archivo" /></td>
            </tr>
        </table>
        <br><br>
        <table border="1px">
            <thead>
                <th>ID</th>
                <th>Nombre</th>
                <th>Actualizar</th>
                <th>Eliminar</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Nombre</td>
                    <td><a href="actualizar.php">Actualizar</a></td>
                    <td><a href="eliminar.php">Eliminar</a></td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <input type="submit" value="Insertar" />
    </form>

1
  • Si esta respuesta ha solucionado tu pregunta, no olvides aceptarla como solucion Commented el 23 jul. 2017 a las 18:42
1

Yo implemente algo mas sencillo, practico y me dio el resultado deseado, que era enviar por metodo post utilizando ajax el formulario para subir una imagen y otros campos.

HTML

<form action="" name="formSubirFoto" id="formSubirFoto" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-sm-6 text-right">
                        <input name="fotoArchivo" id="fotoArchivo" type="file" class="form-control input-sm" style="padding: 0px; border: 0px;">
                    </div>
                    <div class="col-sm-6 text-left">
                        <button class="btn btn-secondary btn-sm btn-block" type="button" id="btnSubir">
                            <i class="icon-camera bigger-100"></i> Subir
                        </button>

                        <input type="hidden" id="fotoIdwr" name="idwr">
                        <input type="hidden" id="fotoCodigo" name="codigo">
                    </div>

                </div>
            </form>

AJAX

$('#btnSubir').click(function () {
        var formData1 = new FormData($('#formSubirFoto')[0]);
        $.ajax({
            type: "POST",
            url: 'mvc/ajax/subir_archivo_wr.php',
            cache:false,
            data: formData1,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function(datos){
                $('#contenido').html(datos);
            }
        });
    });

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.