2

estoy intentando realizar un formulario enorme que tiene varias partes.

Una de las partes es la de subir los estudios de la persona en cuestión, para ello, usando un input file, se podrá subir archivos de los títulos de estudios (1 cada vez):

<div class="formContainer cvFormContainer">
        <p class="formTitle">Create a new CV</p>
        <form id="cvDataForm" method="post" enctype='multipart/form-data'>
          <div class="formDataContainer">
            <div class="personalDataCategory"><h2 class="categoryTitle">Initial data</h4>
              <div id="initialFormError"><!-- Error will be shown here ! --></div>
              <!-- INITIAL DATA  -->
              <fieldset>
                <label for="cvName"><span class="labelText">Name</span></label>
                <input type="text" id="cvName" placeholder="Name" name="cvName" minlength="2" maxlength="100" value=''>
                <label for="surname1"><span class="labelText">Surname 1</span></label>
                <input type="text" class='formInputLeft' placeholder="Surname 1" name="surname1" minlength="2" maxlength="100" value=''>
                <label for="surname2"><span class="labelText">Surname 2</span></label>
                <input type="text" placeholder="Surname 2" name="surname2" minlength="2" maxlength="100" value=''>

                <label for="phone1"><span class="labelText">Phone number</span></label>
                <input type="number" placeholder="phone" name="phone1" minlength="2"  value=''>

                <label for="phone2"><span class="labelText">Phone number 2</span></label>
                <input type="number" placeholder="phone" name="phone2" minlength="2" autocapitalize="off" value=''>

                <label for="address"><span class="labelText">Address</span></label>
                <input type="text" placeholder="address" name="address" minlength="10" maxlength="300" autocapitalize="off" value=''>

                <label for="cvMail"><span class="labelText">Email</span></label>
                <input type="email" placeholder="Enter email" id="cvMail" name="cvMail" autocapitalize="off" value=''>

                <label for="birthdate"><span class="labelText">Birthdate</span></label>
                <input type="date" id="birthdate" name="birthdate" value=''>

                <button  id="btnSaveInitialData" name="btnSaveInitialData">Save data</button>
              </fieldset>
            </div>
            <!-- ADITIONAL DATA  -->
            <div class="aditionalCVCategory" id="aditionalCVDataForm"><h2 class="categoryTitle">Aditional data</h4>
              <fieldset>
                <label for="maritalStatus" class='labelText'>Marital status<br></label>
                <label><input type="radio" class="formRadioInputs" name="maritalStatus" value='Single'>Single<br></label>
                <label><input type="radio" class="formRadioInputs" name="maritalStatus" value='Married'>Married<br></label>
                <label><input type="radio" class="formRadioInputs" name="maritalStatus" value='Divorced'>Divorced<br></label>
                <label><input type="radio" class="formRadioInputs" name="maritalStatus" value='Widowed'>Widowed<br></label>

                <label for="salarialExpectatives"><span class="labelText">Salarial Expectatives</span></label>
                <input type="number" id="salarialExpectatives" min="0" step="any" name="salarialExpectatives">

                <label for="childrenNumber"><span class="labelText">Children number</span></label>
                <input type="number" id="childrenNumber" min="0" name="childrenNumber" autocomplete="off">

                <label class='labelText'>Driving license<br></label>
                <label><input type="checkbox" class="formCheckInputs" name="drivingLicenseA" value="1">A</label>
                <label><input type="checkbox" class="formCheckInputs" name="drivingLicenseB" value="1">B</label>
                <label><input type="checkbox" class="formCheckInputs" name="drivingLicenseC" value="1">C</label>
                <label><input type="checkbox" class="formCheckInputs" name="drivingLicenseD" value="1">D<br></label>

                <label class='labelText'>Skills<br></label>
                <label><input type="checkbox" class="formCheckInputs" name="skNav" value="1">NAV</label>
                <label><input type="checkbox" class="formCheckInputs" name="skSap" value="1">SAP</label>
                <label><input type="checkbox" class="formCheckInputs" name="skA3" value="1">A3</label>
                <label><input type="checkbox" class="formCheckInputs" name="skOffice" value="1">Office<br></label>

                <label for="role" class='labelText'>Department that will apply to</label>
                <?php
                  $userListHandler = PrintDataHandler::getInstance();
                  $userListHandler->printDepartmentSelect();
                 ?>
                <button id="btnSaveAditionalCVData" name="btnSaveAditionalCVData">Save data</button>
              </fieldset>
            </div>
            <!-- LANGUAGES -->
            <div class="LanguagesCategory" id="cvLanguagesForm"><h2 class="categoryTitle">Languages</h4>
              <fieldset>
                <div class="leftDataContent">
                  <?php
                    $userListHandler = PrintDataHandler::getInstance();
                    $userListHandler->printLanguageSelect();
                   ?>
                  <label for="languageLevel" class='labelText'>Level<br></label>
                  <label><input type="radio" class="formRadioInputs" name="languageLevel" value="1" >Basic</label>
                  <label><input type="radio" class="formRadioInputs" style="margin-left:10px" name="languageLevel" value="2" >Intermedian</label>
                  <label><input type="radio" class="formRadioInputs" style="margin-left:10px" name="languageLevel" value="3" >Expert</label>
                  <label><input type="radio" class="formRadioInputs" style="margin-left:10px" name="languageLevel" value="4" >Bilingual</label>
                </div>
                <div class="rightAddButtonContainer">
                  <button class="addButton" id="btnAddLanguage" name="btnAddLanguage"><img class="imgAddButton" src="../resources/icons/add.png" alt="add image"></button>
                </div>
              </fieldset>
              <div class="languagesContainer">
                <h3 class='currentLanguagesTitle'> Current Languages </h3>
                <div id="languageDataContainer"></div>
              </div>
            </div>
            <!-- STUDIES -->
            <div class="StudiesCategory" id="cvStudiesForm"><h2 class="categoryTitle">Studies</h4>
              <fieldset>
                <div class="leftDataContent">
                  <label for="cvDegree"><span class="labelText">Degree</span></label>
                  <input type="text" placeholder="degree" name="cvDegree" minlength="2" maxlength="100">
                  <label for="cvStartingYear"><span class="labelText">Starting year</span></label>
                  <select name="cvStartingYear" id="cvStartingYear">
                    <?php for ($year=1900; $year <= 2018; $year++): ?>
                      <option value="<?php echo $year;?>"><?php echo $year;?></option>
                    <?php endfor; ?>
                  </select>
                  <label for="cvEndingYear"><span class="labelText">End year</span></label>
                  <select name="cvEndingYear" id="cvStartingYear">
                    <?php for ($year=1900; $year <= 2018; $year++): ?>
                      <option value="<?php echo $year;?>"><?php echo $year;?></option>
                    <?php endfor; ?>
                  </select>
                  <label for="cvAcademy"><span class="labelText">Academy</span></label>
                  <input type="text" placeholder="Academy" name="cvAcademy" minlength="2" maxlength="200">
                  <label for="cvStudiesFile"><span class="labelText">Studies files</span></label>
                  <input type="file" id="cvStudiesFile" name='cvStudiesFile' />

                </div>
              <div class="rightAddButtonContainer">
                <button class="addButton" id="btnAddStudy" name="btnAddStudy"><img class="imgAddButton" src="../resources/icons/add.png" alt="add image"></button>
              </div>
            </fieldset>
            <div class="studiesContainer">
              <h3 class='studiesContainerTitle'> Current Studies </h3>
              <div id="studiesDataContainer"></div>
            </div>
          </div>
        </form>
      </div>
    </div>

Este formulario, al pulsar el botón de add, llamaría a una función jquery:

$(document).ready(function() {
  $('#btnAddStudy').click(function(e) {
    e.preventDefault();
    var partialData = $(this).closest('fieldset').serialize();
    var csvFile = $('#cvStudiesFile')[0].files[0];
    var data = new FormData();
    data.append('data', partialData);
    data.append('file', csvFile);
    $.ajax({
      type: 'POST',
      url: '../php/addStudiesProcess.php',
      data: data,
      dataType: 'json',
      success: function(response) {

      },
    });
    return false;
  });
});

La cual enviaría por post todos los datos.

En un principio, sube los datos de todos los campos excepto el archivo en sí gracias a que recoge todos los datos del fieldset correspondiente (tengo varios grupos, el anterior es uno de muestra).

He probado a hacer un console.log(data) y no veo que se adjunten archivos.

¿Cómo podría enviar los archivos sin hacer submit en el formulario?

PD: el formulario posee enctype <form id="cvDataForm" method="post" enctype='multipart/form-data'>

Editado: Pongo el formulario entero para que no haya confusiones.

Tras leer las respuestas, he cambiado el archivo jquery pero los parámetros que obtengo son:

-----------------------------1760555163458
Content-Disposition: form-data; name="data"

cvDegree=asdasdas&cvStartingYear=1907&cvEndingYear=1916&cvAcademy=IES%20Ntra%20Sra%20De%20Los%20Remedios
-----------------------------1760555163458
Content-Disposition: form-data; name="file"; filename="example.txt"
Content-Type: text/plain

example

-----------------------------1760555163458--

La idea sería obtener parámetros de tipo $_POST.

4
  • Lo extraño es que en tu código HTML no veo ningún formulario... En todo caso, o envías el formulario completo, o creas una variable basada en FormData a la cual le agregas el archivo.
    – A. Cedano
    Commented el 24 abr. 2018 a las 12:44
  • La parte del código no está puesta completa, para que se vea la parte que sólo quiero enviar. Commented el 24 abr. 2018 a las 12:53
  • Sería algo así: var partialData = $(this).closest('fieldset').serialize(); var csvFile=$('#cvStudiesFile')[0].files[0]; var data = new FormData(); data.append('data',partialData); data.append('file', csvFile);
    – A. Cedano
    Commented el 24 abr. 2018 a las 12:58
  • Haciendo lo que me comentas A.Cedano, la petición ya no es como el típico$_POST. Edito para enseñarte el código. Commented el 24 abr. 2018 a las 13:10

2 respuestas 2

5

Puedes crear un objeto del tipo FormData al cual le agregarás los datos parciales obtenidos con serialize, así como el archivo.

Además, deberás indicar en la petición ajax otros dos valores:

  • contentType: false y
  • processData: false

He probado este código y me funciona a la perfección. He aprovechado para escribir la petición Ajax acorde a los tiempos modernos, dado que jQuery 3 declaró obsoletas las funciones success y error usadas tradicionalmente para controlar las peticiones Ajax. Ellos recomiendan el uso de doney de fail.

$( function() { /*preferible a document.ready, el cual es obsoleto desde jQuery 3*/

  $('#btnAddStudy').click(function(e) {
    e.preventDefault();
    var partialData = $(this).closest('fieldset').serialize();
    var csvFile=$('#cvStudiesFile')[0].files[0];
    var data = new FormData();
    data.append('data',partialData); 
    data.append('file', csvFile);

    var request = $.ajax
        ({
            url: '../php/addStudiesProcess.php',
            method: 'POST',
            contentType: false,
            processData: false,
            data: data,
            dataType: "json"
        });

        request.done(function( msg )
        {
            console.log("hecho: "+msg);

        });

        request.fail(function( jqXHR, textStatus )
        {
            alert( "Hubo un error: " + textStatus );
        });

  });    

});

##PHP

Ten en cuenta que habrá dos claves en los datos que estás enviando: data y file. Lo digo para que lo tengas en cuenta en el isset de PHP.

  • Para recuperar los datos tienes que acceder a $_POST['data']. Esto será un array que contendrá los diferentes valores serializados. Por ejemplo:

     $arrDatos=$_POST['data'];
     $startYear=$arrDatos['cvStartingYear']; /*Aquí estaríamos accediendo a uno de los valores dentro del POST*/
    
  • Para recuperar el archivo tienes que acceder a $_FILES['file']

Nota: Dado que indicaste un dataType: 'json' en la petición Ajax, tu script PHP no puede responder otra cosa diferente a un json válido, de lo contrario tendrás derecho a un parse error .... Si quieres manejar otro tipo de respuesta debes cambiar el dataType a html u otro.


PostData

En algunos casos, según comentario de OP, habrá que leer la parte de datos que no son archivos mediante el uso de parse_str().

Por ejemplo:

parse_str($_POST["data"], $mData);

Aquí, la parte data del POST será todo lo que pusimos en partialData en el cliente, y ahora usaremos $mData para obtener los valores, por ejemplo:

echo $mData["cvName"]; //...etc
7
  • Acabo de leer la respuesta. Simplemente debería acceder a $_POST['data']['indiceABuscar'], ¿cierto? Commented el 24 abr. 2018 a las 13:14
  • Sí, eso para los datos, mientras que el archivo estará en file. De hecho, estás enviando un formulario multipart, con dos partes: en una los datos y en otra el archivo.
    – A. Cedano
    Commented el 24 abr. 2018 a las 13:15
  • En este caso, haciendo un print_r($_POST) obtengo esto: Array ( [data] => cvDegree=asdasdas&cvStartingYear=1907&cvEndingYear=1916&cvAcademy=IES%20Ntra%20Sra%20De%20Los%20Remedios ) ¿Cómo puedo trabajar con eso? Commented el 24 abr. 2018 a las 13:17
  • Espera, estoy haciendo unas pruebas... hay algo que no me está funcionando bien...
    – A. Cedano
    Commented el 24 abr. 2018 a las 13:21
  • 1
    Solucionado. He creado un array haciendo: parse_str($_POST["data"], $data); Commented el 26 abr. 2018 a las 7:47
0

Para realizar la subida al servidor de un archivo con AJAX puedes basarte en el siguiente código.

function cargaArchivo(){
    var formData    = new FormData(document.getElementById("formvalida"));

    $.ajax({
        url:            "loadFile",
        type:           "post",
        async:          "false",
        dataType:       "JSON",
        data:           formData,
        cache:          false,
        contentType:    false,
        processData:    false

    })
    .done(function(result) {
        console.log(result);
    })
    .fail(function() {
        console.log("error en cargaArchivo()");
    })
}

Para recibir los datos enviados desde AJAX con ayuda de PHP puedes tomar como ejemplos el siguiente fragmento de código.

public function loadFile(){

    # Si necesitas ver todo el contenido del request _FILE
    # echo "<pre>"; 
    # print_r($_FILE);
    $adjunto['error'] = $_FILES['adjunto']['error'];
    $adjunto['name']  = $_FILES['adjunto']['name'];

    echo json_encode($adjunto);

}

Espero de haber sido de ayuda,

Saludos cordiales ECG.

1
  • No me funciona. Necesito que obtenga los datos del formulario sin hacer submit + el archivo en cuestión. ¿No hay alguna manera de concatenar el fichero antes de hacer el serialize, tal y como tengo en el código? Commented el 24 abr. 2018 a las 12:40

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.