Question

是否可以使用jQuery来计算/验证/限制动态添加的文件字段的总上传大小？表单将作为电子邮件副本发送内容，因此应将总上传大小限制为例如。 20MB左右。后端验证没问题（通过PHP）。

验证可以“即时”完成，也可以在提交时进行。

请考虑以下代码：

<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" name="attachment[]">
  </div>
</div>

和jQuery：

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

小提琴：https://jsfiddle.net/yyqnwfb9/1/

非常感谢任何有关如何解决此问题的意见。

更新：实施解决方案的新小提琴：https://jsfiddle.net/yyqnwfb9/2/

Answer 1

您可以使用HTML5 File API来获取尺寸。例如，要获取页面中所有文件的总大小（以字节为单位）：

function getTotal() {
  var total = 0;

  $(':file').each(function() {    
    if (this.files && this.files[0]) {
      total += this.files[0].size;
    }
  });

  return total;
}

$(function() {
  var maxSize = 3 * 1000 * 1000 ; // ~3MB
  $(document).on('change', ':file', function() {    
    if (getTotal() > maxSize) {
      // Clear field
      $(this).val('');
      // Display error?
      $('#total').append(' Too big');
    } else {
      // Update total
      $('#total').text(getTotal());
    }
  });
});

input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">

<strong>Total Bytes: <span id="total">0</span></strong>

Answer 2

我在上传功能中设置了 3MB 的文件大小限制

＆＃13;

$(document).ready(function() {
 
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  var uploadField = document.getElementById("file");

  uploadField.onchange = function() {
      if(this.files[0].size > 307200){
         alert("File is too big!");
         this.value = "";
      }
      else{
              $(add_button).click(function(e) {
          e.preventDefault();
          if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
          }
        });

        $(wrapper).on("click", ".remove_field", function(e) {
          e.preventDefault();
          $(this).parent('div').remove();
          x--;
        })
            }

        };
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" id="file" name="attachment[]">
  </div>
</div>

＆＃13;

jQuery：在表单中动态添加文件上载字段并验证总大小

2 个答案: