Hola a todos espero me puedan ayudar, hago este proyecto el cual adiciona un campo tipo file y un campo text para subir un archivo y ponerle un titulo al mismo. todo funciona bien.. pero le adicione algo que no veo que me funciona lo cual es un script que va sumando los archivos que se van examinando y deseo que solo permita pdf y que la suma de estos no supere por ejemplo 15Mb..
si lo hace salte una alerta (alert) que diga que se ha superado el limite de peso en los archivos y si no es un PDF igual salga que el archivo no esta pernitido.
si ven en mi ejemplo va sumando los archivos adicionados pero al momento de quitar un campo No se va restando de l listado el archivo si no que lo deja a cero 0
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper').on('change', 'input[name="archivosW[]"]', function() {
suma = 0;
$('input[type="file"]').each(function() {
if (this.files[0]) {
console.log('Archivo', this.files[0].size);
suma += this.files[0].size;
document.getElementById('resultado').innerHTML = suma;
}
})
document.getElementById('resultado').innerHTML = suma;
})
var fieldHTML = '<div id="nTargeta2"><input type="text" name="documento[]" id="documento" autocomplete="off" placeholder="Nombre del Documento" required/> Archivo: <input type="file" name="archivosW[]" id="archivosW" accept="application/msword,application/pdf,image/jpeg,image/png" class="form-control-file archivosWW"/> <a href="javascript:void(0);" style="color: blue" class="remove_button" title="Remove field"> Quitar</a></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function() { //Once add button is clicked
if (x < maxField) { //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', 'input[name="archivosW[]"]', function(e) {
//Once remove button is clicked
$('input[type="file"]').each(function() {
if (this.files[0]) {
suma -= this.files[0].size;
document.getElementById('resultado').innerHTML = suma;
}
})
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<table width="70%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td width="700" colspan="2" bgcolor="#FFFFFF">
<div class="field_wrapper" style="width: 700px;">
<input name="documento[]" type="text" required id="documento" autocomplete="off" placeholder="Nombre del Documento" /> Archivo:
<input type="file" name="archivosW[]" id="archivosW" class="form-control-file archivosWW" accept="application/msword,application/pdf,image/jpeg,image/png" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<div id="nTargeta" style="float:left;"><a href="javascript:void(0);" style='color:blue' class="add_button" title="Adjuntar otro Archivo">Anexe otro Documento</a>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<div id="resultado"></div>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><input name="generar_reporte" id="btsubmit" type="submit" value="Enviar" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>