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.
FormData
a la cual le agregas el archivo.var partialData = $(this).closest('fieldset').serialize(); var csvFile=$('#cvStudiesFile')[0].files[0]; var data = new FormData(); data.append('data',partialData); data.append('file', csvFile);