Serialize and send text and image through AJAX

Question

Serialize and send text and image through AJAX

Navigation

#1 by (2 votes)

0

I have a form which contains a text field and a file field to upload images which I send via AJAX.

How can I serialize both the input file and the input text to send the two data at the same time?

I have serialized the text field and also the FormData for the input fil, but it only allows me to send 1 file, or the text or the input file.

This is what I have tried:

$("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>

javascript jquery ajax

asked by Esequiel Erick Rosas Toribio 23.07.2017 в 17:29

source

1 answer

Prevent EditText from expanding with long text problem with routes?

score 2 · Answer 1

The problem is that you are not sending the data serializados .

As it is about sending an image and serialized content of the form, we will have to use the serializeArray () function to send all the content in a single 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>