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.