Знать ПОЛНЫЙ размер файлов, пересланных в формуляре

Как я могу знать полный размер всех файлов, которые я переслал в формуляр? Мне хотелось бы контролировать это скорее с jquery для того, чтобы пользователь смог видеть место, займи с файлами.

Если он превосходит предел, который не может делать submit и который выходит сообщение, что файлы слишком большие...

Это фрагмент кода.

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>

чтобы мочь контролировать это из-за php или из-за jquery, он я безразличный.

0
задан 25.01.2017, 19:37
0 ответов

Как твой пример не функционирует правильно здесь у тебя есть доказательство концепции того, что ты хочешь сделать:

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>

Приветствие.

1
ответ дан 03.12.2019, 17:30

Добрый вечер, ты мог бы контролировать вес файлов с php с ajax.

Выбор 1: Каждый раз, когда ты переслал файл проконтролируй событие и пошли вызов AJAX, чтобы видеть $ _FILES ['size'] и видь складывая это.

Выбор 2: Когда ты пошлешь формуляр, сложи $ _FILES ['size'] всех.

0
ответ дан 03.12.2019, 17:30