1

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>

1
  • esto sucede por que la variable suma esta en dos contextos diferentes ... Commented el 7 may. a las 15:35

1 respuesta 1

1

Al subir archivos deberias agregar algunas validaciones adicionales.

Primeramente, necesitas asegurarte de que la suma del tamaño de los archivos no exceda los 15MB y que solo permita archivos PDF. Además, al quitar un campo, debes restar el tamaño del archivo eliminado correctamente.

Al no saber si fue el ultimo archivo el eliminado o cual, esto crea una falla en la logica que debe ser controlado:

Te doy unos ejemplos de como lo implementaria yo:

$(document).ready(function(){
    var maxField = 10; // Límite máximo de campos
    var addButton = $('.add_button'); // Selector para el botón de agregar
    var wrapper = $('.field_wrapper'); // Contenedor de campos
    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/pdf" class="form-control-file archivosWW"/> <a href="javascript:void(0);" style="color: blue" class="remove_button" title="Remove field">Quitar</a></div>'; // HTML del nuevo campo
    var x = 1; // Contador de campos, empieza en 1

    // Agregar campo
    $(addButton).click(function(){
        if(x < maxField){
            x++;
            $(wrapper).append(fieldHTML);
        }
    });

    // Remover campo
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); // Remover el div del campo

        // Recalcular la suma del tamaño de los archivos restantes
        var suma = 0;
        $('input[type="file"]').each(function(){
            if(this.files.length > 0 && this.files[0].type === 'application/pdf'){
                suma += this.files[0].size;
            }
        });

        // Mostrar la suma en un elemento HTML
        document.getElementById('resultado').innerHTML = suma;

        // Verificar límite de tamaño
        if(suma > 15 * 1024 * 1024){ // 15MB en bytes (1MB = 1024 * 1024 bytes)
            alert('Se ha superado el límite de peso en los archivos (15MB).');
        }
    });

    // Validación al cambiar el archivo seleccionado
    $(wrapper).on('change', 'input[name="archivosW[]"]', function(){
        var file = this.files[0];

        // Validar si es PDF
        if(file.type !== 'application/pdf'){
            alert('El archivo seleccionado no es un PDF.');
            $(this).val(''); // Limpiar el valor del input file
            return;
        }

        // Recalcular la suma del tamaño de los archivos
        var suma = 0;
        $('input[type="file"]').each(function(){
            if(this.files.length > 0 && this.files[0].type === 'application/pdf'){
                suma += this.files[0].size;
            }
        });

        // Mostrar la suma en un elemento HTML
        document.getElementById('resultado').innerHTML = suma;

        // Verificar límite de tamaño
        if(suma > 15 * 1024 * 1024){ // 15MB en bytes (1MB = 1024 * 1024 bytes)
            alert('Se ha superado el límite de peso en los archivos (15MB).');
        }
    });
});

Te deje comentarios en las lineas en las que es importante saber que sucede. no he tenido chance de validar el codigo si hay algo que no entiendas o no funcione correctamente me dices para verificarlo.

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.