使用动态创建的文件输入字段进行 Jquery 文件验证

Question

我想验证 size 和 extension 等文件输入字段。

我将根据客户要求添加更多文件输入字段。看截图

https://drive.google.com/file/d/0B7DnAEDiJntwY0pkeXlya0xPdzg/view?usp=sharing

当我使用以下函数检查文件名和大小时。但它不适用于动态创建的元素。

 <span class="input-group-addon btn btn-Choose btn-file">
   <span class="fileinput-new">Browse File</span>
   <span class="fileinput-exists">Change</span>
   <input class="fileimgval" type="file" name="brchrimg[]">
 </span>

 $(document).on('change','input:file',function(){
    var fileName = $(this).val();
    alert(fileName);
  });

当用户点击加号按钮时，会生成一个新的上传字段并使用它进行操作。

如何在 jquery 中获取文件名和大小？

谢谢

Answer 1

HTML 5 File API 规范，文件的一些属性可以在客户端访问，文件大小就是其中之一。所以想法是使用 size 属性并找出文件大小。但由于它是 HTML 5 规范的一部分，所以它只适用于现代浏览器。 [Ref]

试试这个：

$(document).on('change', 'input:file', function() {
  var fileName = $(this).val();
  var iSize = $(this)[0].files[0].size / 1024;
  var size = '';
  if (iSize / 1024 > 1) {
    if (((iSize / 1024) / 1024) > 1) {
      iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
      size = iSize + "Gb";
    } else {
      iSize = (Math.round((iSize / 1024) * 100) / 100);
      size = iSize + "Mb";
    }
  } else {
    iSize = (Math.round(iSize * 100) / 100);
    size = iSize + "kb";
  }
  alert('fileName: ' + fileName + '  size: ' + size);
});
$('#addMore').on('click', function() {
  var html = '<br><span class="input-group-addon btn btn-Choose btn-file">\
   <span class="fileinput-new">Browse File</span>\
<span class="fileinput-exists">Change</span>\
<input class="fileimgval" type="file" name="brchrimg[]">\
</span>';
  $('#parent').append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='parent'>
  <span class="input-group-addon btn btn-Choose btn-file">
   <span class="fileinput-new">Browse File</span>
  <span class="fileinput-exists">Change</span>
  <input class="fileimgval" type="file" name="brchrimg[]">
  </span>
</div>
<Button id='addMore'>Add More</Button>

Fiddle here