0

Como puedo saber el tamaño total de todos los archivos que yo he subido a un formulario? Me gustaría más bien controlarlo con jquery para que el usuario pueda ver cuanto espacio está ocupando con los archivos.

Si sobrepasa el límite que no pueda hacer submit y que salga un mensaje de que los archivos son demasiado grandes...

Este es el fragmento del código.

document.getElementById('image1').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero1').innerHTML = document.getElementById('image1').files[0].name;
			  $('#fichero1').removeClass('btn-danger');
			  $('#fichero1').addClass('btn-success');
			  $('#fichero1').css('text-align', 'center');
			  $('#fichero1').css('padding-top', '5px');
			}
			document.getElementById('image2').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero2').innerHTML = document.getElementById('image2').files[0].name;
			  $('#fichero2').removeClass('btn-danger');
			  $('#fichero2').addClass('btn-success');
			  $('#fichero2').css('text-align', 'center');
			  $('#fichero2').css('padding-top', '5px');
			}
			document.getElementById('image3').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero3').innerHTML = document.getElementById('image3').files[0].name;
			  $('#fichero3').removeClass('btn-danger');
			  $('#fichero3').addClass('btn-success');
			  $('#fichero3').css('text-align', 'center');
			  $('#fichero3').css('padding-top', '5px');
			}
			document.getElementById('image4').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero4').innerHTML = document.getElementById('image4').files[0].name;
			  $('#fichero4').removeClass('btn-danger');
			  $('#fichero4').addClass('btn-success');
			  $('#fichero4').css('text-align', 'center');
			  $('#fichero4').css('padding-top', '5px');
			}
			document.getElementById('image5').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero5').innerHTML = document.getElementById('image5').files[0].name;
			  $('#fichero5').removeClass('btn-danger');
			  $('#fichero5').addClass('btn-success');
			  $('#fichero5').css('text-align', 'center');
			  $('#fichero5').css('padding-top', '5px');
			}
			document.getElementById('image6').onchange = function () {
			  console.log(this.value);
			  document.getElementById('fichero6').innerHTML = document.getElementById('image6').files[0].name;
			  $('#fichero6').removeClass('btn-danger');
			  $('#fichero6').addClass('btn-success');
			  $('#fichero6').css('text-align', 'center');
			  $('#fichero6').css('padding-top', '5px');
			}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.my-btn{
	margin-bottom:6px;
	margin-left:0px;
	margin-right:0px;
	margin-top: 15px;
	width: 100%;
	border:none;
	border-radius:5px;
	height: 35px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-md-6 col-xs-12">
  <center>
    <img src="../res/images/1.png" />
  </center>
  <input id="image1" type="file" class="inputfile" value="image1" name="image1" required />
  <label id="fichero1" for="image1" class="my-btn btn-danger">
    <center>
       1
    </center>
  </label>
  <br>
  <center>
    <img src="../res/images/2.png" />
  </center>
  <input id="image2" type="file" class="inputfile" value="image2" name="image2" required />
  <label id="fichero2" for="image2" class="my-btn btn-danger">
    <center>
      2
    </center>
  </label>
  <br>
  <center>
    <img src="../res/images/3.png" />
  </center>
  <input id="image3" type="file" class="inputfile" value="image3" name="image3" required />
  <label id="fichero3" for="image3" class="my-btn btn-danger">
    <center>
       3
    </center>
  </label>
  <br>
</div>
<div class="col-md-6 col-xs-12">
  <center>
    <img src="../res/images/4.png" />
  </center>
  <input id="image4" type="file" class="inputfile" value="image4" name="image4" required />
  <label id="fichero4" for="image4" class="my-btn btn-danger">
    <center>
       4
    </center>
  </label>
  <br>
  <center>
    <img src="../res/images/5.png" />
  </center>
  <input id="image5" type="file" class="inputfile" value="image5" name="image5" required />
  <label id="fichero5" for="image5" class="my-btn btn-danger">
    <center>
       5
    </center>
  </label>
  <br>
  <center>
    <img src="../res/images/6.png" />
  </center>
  <input id="image6" type="file" class="inputfile" value="image6" name="image6" required />
  <label id="fichero6" for="image6" class="my-btn btn-danger">
    <center>
       6
    </center>
  </label>
  <br>
</div>

a poderlo controlar por php o por jquery, me es indiferente.

1
  • Tu ejemplo no funciona al pulsar en "Ejecutar", así que te he creado una prueba de concepto para que veas cómo puedes acceder a la información que deseas y cómo puedes calcularla analizando uno a uno todos los campos del formulario. Commented el 26 ene. 2017 a las 13:14

2 respuestas 2

1

Como tu ejemplo no funciona correctamente aquí tienes una prueba de concepto de lo que quieres hacer:

function comprobar(obj) {
  var total = 0;
  for (i in obj.files) {
    if (obj.files[i].size !== undefined) {
      total += obj.files[i].size;
    }
  }
  document.getElementById(obj.name).innerHTML = total;
  calcular_total();
}

function calcular_total() {
  var total = 0;
  for (elem in document.formulario) {
    if (document.formulario[elem] === null) continue;
    if (document.formulario[elem].type == 'file') {
      for (i in document.formulario[elem].files) {
        if (document.formulario[elem].files[i].size !== undefined) {
          total += document.formulario[elem].files[i].size;
        }
      }
    }
  }
  document.getElementById("total").innerHTML = total;
}
<form name="formulario" onsubmit="return false">
  <p>Archivo 1: <input type="file" name="archivo1" onchange="comprobar(this)" />
    (<span id="archivo1">0</span> Bytes)</p>
  <p>Archivo 2: <input type="file" name="archivo2" onchange="comprobar(this)" />
    (<span id="archivo2">0</span> Bytes)</p>
  <p><input type="submit" /></p>
  <p>El total, por ahora, es de
    (<span id="total">0</span> Bytes)</p>
</form>

Un saludo.

0

Buenas tardes, podrías controlar el peso de los archivos desde php con ajax.

Opcion 1: Cada vez que subas un archivo controla el evento y manda una llamada AJAX para ver el $_FILES['size'] y ve sumandolo.

Opcíon 2: Cuando envies el formulario suma el $_FILES['size'] de todos.

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.