Question

我想验证文件输入字段，例如尺寸和扩展程序。

我根据客户需求附加更多文件输入字段。见截图

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文件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

使用动态创建的文件输入字段

1 个答案: