JavaScript - Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo Arroyo Teherán (176 intervenciones) el 22/06/2023 17:44:54

Hola amigos y amigas.. espero me puedan ayudar en esto..

tengo un formulario que adiciona campos de los se que necesiten

Captura456

dichos campos son un input y un file.. asi:

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    var maxField = 10; //Input fields increment limitation

    var addButton = $('.add_button'); //Add button selector

    var wrapper = $('.field_wrapper'); //Input field wrapper

    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', function(e){ //Once remove button is clicked

        e.preventDefault();

        $(this).parent('div').remove(); //Remove field html

        x--; //Decrement field counter

});

});

</script>

</head>

<body>

<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"><input name="generar_reporte" id="btsubmit" type="submit" value="Enviar"/></td>

  </tr>

  <tr>

    <td colspan="2"></td>

  </tr>

</table>

Como hago para que al ir seleccionando los archivos se vaya "sumando" el peso de estos y si sobrepasa por ejemplo los 10MB o menos (la suma de todos los pdf) aparezca una alerta que los archivos no pueden pasar el peso permitido).

Mil Gracias!!!!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 22/06/2023 19:00:58

Alejandro se encuentra ahora conectado en el
chat de PHP

Los file tienen la propiedad size que te da el valor en bytes.

Iteras todos los files y realizas la suma.

$('input[type="file"]').change(function(){

	suma = 0;

	$('input[type="file"]').each(function(){

		if( this.files[0] ){

			console.log('Archivo', this.files[0].size);

			suma += this.files[0].size;

})

	console.log('Suma', suma);

})

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 22/06/2023 19:07:03

Entiendo

mis campos tipo file se llaman archivosW y como se van creando dinámicamente es donde veo el inconveniente para aplicarlo en el código que me envías y como son de modo multiple le pongo las llaves [] al nombre asi archivosW[] por lo que se me complica mas...

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 22/06/2023 20:11:44

Alejandro se encuentra ahora conectado en el
chat de PHP

Solo adaptalo a tu código, nada complicado.

$('.field_wrapper').on('change', 'input[name="archivosW[]"]', function(){

...

    $('input[name="archivosW[]"]').each(function(){

        ....

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 22/06/2023 20:46:46

en verdad lo he puesto en apats de ese cpdigo y me salta error.

<script type="text/javascript">

$(document).ready(function(){

    var maxField = 10;

    var addButton = $('.add_button');

    var wrapper = $('.field_wrapper');

    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">&nbsp;&nbsp;&nbsp;Quitar</a></div>'; //New input field html

    var x = 1; //Initial field counter is 1

    $(addButton).click(function(){

        if(x < maxField){

            x++;

            $(wrapper).append(fieldHTML); // Add field html

});

    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked

        e.preventDefault();

        $(this).parent('div').remove(); //Remove field html

        x--;

});

});

</script>

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 22/06/2023 20:56:51

Alejandro se encuentra ahora conectado en el
chat de PHP

El código no muestra nada de lo que te he puesto y si te salta error es importante la descripción para saber como abordarlo.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 23/06/2023 17:07:44

tienes razon copie el codigo que no era mil disculpas...

<script type="text/javascript">

$(document).ready(function(){

    var maxField = 10;

    var addButton = $('.add_button');

   // var wrapper = $('.field_wrapper');

	var wrapper = $('.field_wrapper').on('change', 'input[name="archivosW[]"]', function(){

    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">&nbsp;&nbsp;&nbsp;Quitar</a></div>'; //New input field html

    var x = 1; //Initial field counter is 1

    $(addButton).click(function(){

        if(x < maxField){

            x++;

            $(wrapper).append(fieldHTML); // Add field html

});

    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked

        e.preventDefault();

        $(this).parent('div').remove(); //Remove field html

        x--;

});

});

</script>

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 23/06/2023 17:58:52

Alejandro se encuentra ahora conectado en el
chat de PHP

En efecto, lo haz hecho mal. Mira cómo se ve bien indentado

$(document).ready(function(){

    var maxField = 10;

    var addButton = $('.add_button');

	// var wrapper = $('.field_wrapper');

	var wrapper = $('.field_wrapper').on('change', 'input[name="archivosW[]"]', function(){

		//New input field html

		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">&nbsp;&nbsp;&nbsp;Quitar</a>'+

						'</div>';

		//Initial field counter is 1

		var x = 1;

		$(addButton).click(function(){

			if(x < maxField){

				x++;

				// Add field html

				$(wrapper).append(fieldHTML);

});

		//Once remove button is clicked

		$(wrapper).on('click', '.remove_button', function(e){

			e.preventDefault();

			//Remove field html

			$(this).parent('div').remove();

			x--;

});

});

Puedes notar que:
- El .on() de la linea 5 no esta cerrado.
- Lo que ya tenías funcionando lo has pasado a estropear metiendolo en la función del evento change de input[name="archivosW[]"]
- La linea 22 queda con una variable indefinida wrapper, ya que esta dentro de la función que se hace en el elemento de la linea 5, que además lo estas asignando a wrapper.
- No realizas nada de lo que inicialmente estabas solicitando, sumar el peso de los archivos.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 23/06/2023 18:09:09

De vredad no doy si pongo esos cambios que me pides no me sirve el ir agregando campos (deja de funcionar)

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 23/06/2023 20:11:14

Alejandro se encuentra ahora conectado en el
chat de PHP

$(document).ready(function(){

    var maxField = 10;

    var addButton = $('.add_button');

    var wrapper = $('.field_wrapper');

	//New input field html

    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">&nbsp;&nbsp;&nbsp;Quitar</a>'+

					'</div>';

    //Initial field counter is 1

	var x = 1;

    $(addButton).click(function(){

        if(x < maxField){

            x++;

			// Add field html

            $(wrapper).append(fieldHTML);

});

	//Once remove button is clicked

	$(wrapper).on('click', '.remove_button', function(e){

        e.preventDefault();

		//Remove field html

        $(this).parent('div').remove();

        x--;

});

	$(wrapper).on('change', 'input[name="archivosW[]"]', function(){

		suma = 0;

		$('input[name="archivosW[]"]').each(function(){

			if( this.files[0] ){

				console.log('Archivo', this.files[0].size);

				suma += this.files[0].size;

})

		console.log('Suma', suma);

})

});

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 23/06/2023 21:27:34

hola mil gracias veo en la consola como va sumando los valores en bytes excelente mil graciassss

le adicione esto pero tengo un problema al quitar un campo debería mostrar el valor Actualizado (sin el peso del archivo que se retiró)

var sumatoria=suma;

		alert(sumatoria);

guardo todo en una variable llamada sumatoria para luego hacer las comprobación con if que no pase de 10MB (10485760 bytes) pero queda en la variable el valor almacenado como si tuviera el archivo eliminado agregado!!!

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 23/06/2023 23:12:55

Alejandro se encuentra ahora conectado en el
chat de PHP

Cambia la función anónima por una función definida, a está función la llamas cuando cambia el input file y cuando lo eliminas.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 24/06/2023 17:17:40

gracias alli estuve tratando de hacerlo le puse nombre a la funcion como me explicaste.. (alli comente donde lo hice..)
luego le puse la linea de codigo (igual comente) que cuando elimine el campo se elimina en el conteo de la suma... pero al borrar el campo en la consola me salta un error......

borrar

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    var maxField = 10;

    var addButton = $('.add_button');

    var wrapper = $('.field_wrapper');

	//New input field html

    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">&nbsp;&nbsp;&nbsp;Quitar</a>'+

					'</div>';

    //Initial field counter is 1

	var x = 1;

    $(addButton).click(function(){

        if(x < maxField){

            x++;

			// Add field html

            $(wrapper).append(fieldHTML);

});

	//Once remove button is clicked

	$(wrapper).on('click', '.remove_button', function(e){

        e.preventDefault();

		//Remove field html

        $(this).parent('div').remove();

        x--;

		suma -= this.files[0].size;

});

	// ACA PONGO PARA CUANDO SE ELIMINE EL CAMPO LLAMA LA FUNCION  --------------------------------

		$(wrapper).on('click', '.remove_button', function(calcula){

        e.preventDefault();

		//Remove field html

        //$(this).parent('div').remove();

        //x--;

		suma -= this.files[0].size;

});

 // LE PONGO UN NOMBRE A LA FUNCION ---------------------------------------------

	$(wrapper).on('change', 'input[name="archivosW[]"]', function(calcula){

		suma = 0;

		$('input[name="archivosW[]"]').each(function(){

			if( this.files[0] ){

				console.log('Archivo', this.files[0].size);

				suma += this.files[0].size;

})

		console.log('Suma', suma);

			var sumatoria=suma;

		//alert(sumatoria);

		//if(sumatoria> 10485760){

			//alert ("Los Archivos sobrepasan el peso Permitido 10MB");

			//accion que detenga la ejecucion del codigo

		//}else{

			//accion que permita continuar

//}

})

});

</script>

</head>

<body>

<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"><input name="generar_reporte" id="btsubmit" type="submit" value="Enviar"/></td>

  </tr>

  <tr>

    <td colspan="2"></td>

  </tr>

</table>

y otra consulta me imagino que para realizar las condicionales y verificar que los bytes no sobreparen los bytes permitidos 10MB (10485760 bytes) debo guardar ese valor sumando asi..?? (por el momento comente estas lineas...)

console.log('Suma', suma);

			var sumatoria=suma;

		//alert(sumatoria);

		if(sumatoria> 10485760){

			alert ("Los Archivos sobrepasan el peso Permitido 10MB");

			//accion que detenga la ejecucion del codigo

		}else{

			//accion que permita continuar

})

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 26/06/2023 21:44:48

Alejandro se encuentra ahora conectado en el
chat de PHP

La función sigue estando anónima, solo agregaste un parámetro "calcula".

Función anónima

$(selector).click(function(){ console.log('Hola mundo') });

Funcion definida

function saludar(){

    console.lgo('Hola mundo');

$(selector1).click(saludar); // Ej. al agregar

$(selector2).click(saludar); // Ej. al borrar

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 26/06/2023 21:57:07

En verdad agradezco todo tu tiempo, conocimiento y paciencia.. pero en verdad no doy

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 13/03/2024 01:53:17

ya lo pude realizar pero ahora al borrar un file no actualiza el peso del archivo con los archivos que quedan....

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(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', function(e){ //Once remove button is clicked

        e.preventDefault();

        $(this).parent('div').remove(); //Remove field html

        x--; //Decrement field counter

});

});

</script>

</head>

<body>

<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>

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 13/03/2024 04:38:33

he intentado hacerlo en la parte donde esta el codigo que retira o remueve el wraper pero quita el conteo y lo pone igual a cero

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

});

});

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 13/03/2024 16:16:09

Alejandro se encuentra ahora conectado en el
chat de PHP

Tienes que hacer exactamente lo mismo, contar de nuevo los size de todos los inputfile, al no existir el elemento eliminado no sera contado.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 14/03/2024 13:33:04

Hola gracias por responder no entiendo por que al unir un archivo va sumando y al quitar suma otro mas... le adicione exactamente lo mismo en el decremento -- donde elimina el campo. pero deberia quitar no sumar....

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(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] ){

			console.log('Archivo', this.files[0].size);

			suma += this.files[0].size;

			 document.getElementById('resultado').innerHTML = suma;

})

        e.preventDefault();

        $(this).parent('div').remove(); //Remove field html

        x--; //Decrement field counter

});

});

</script>

</head>

<body>

<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>

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Alejandro (532 intervenciones) el 14/03/2024 19:24:11

Alejandro se encuentra ahora conectado en el
chat de PHP

Por ejemplo: tienes 3 elementos file
file size=10
file size=15
file size=25

El programa suma el size de todos los elementos file: 10 + 15 + 25 = 50

Eliminas el segundo elemento
file size=10
~~file size=15~~
file size=25

ahora solo tienes 2 elementos
file size=10
file size=25

El programa suma el size de todos los elementos file: 10 + 25 = 35

Valora esta respuesta

Comentar

Pos: 15

Val: 159

Limitar el tamaño de los archivos seleccionados File y salga alerta mas del peso permitido

Publicado por Eduardo (176 intervenciones) el 15/03/2024 01:04:53

hola gracias pro responder entendi tu referencia.. pero no logroi hacer que funcione pongo el mismo codigo en la parte de la dismiucion pero no logro hacer que descuente la que se borro

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

});

});

Valora esta respuesta

Comentar

Obtener valor de una tabla

Ejercicio de js