使用动态创建的文件输入字段的Jquery文件验证 [英] Jquery File Validation with Dynamically Created File input Fields

问题描述

我想要验证文件输入字段，如 size 和扩展名。

根据客户要求进行。看截图

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

当我使用下面的函数来检查文件名称和大小。但是它不能在动态创建的元素上工作。

 < span class =input-group-addon btn btn-Choose btn-文件> 
< span class =fileinput-new>浏览文件< / span> 
< span class =fileinput-exists>更改< / span> 
< input class =fileimgvaltype =filename =brchrimg []> 
< / span> 
 $ b $（document）.on（'change'，'input：file'，function（）{
 var fileName = $（this）.val（）; 
 alert （fileName）; 
}）; 
  

当用户点击 Plus 按钮时，如何获取jquery中的文件名和大小？

谢谢

解决方案

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 （（iSize / 1024）/ 1024）* 100）/（iSize / 1024> 1） 100）; size = iSize +Gb;} else {iSize =（Math.round（（iSize / 1024）* 100）/ 100）; size = iSize +Mb （''size ='size'）;}）; $（'＃addMore'）。on（'isize * 100）/ 100）点击'，function（）{var html ='< br>< span class =input-group-addon btn btn-选择btn-file> \< span class =fileinput-new>浏览文件< / span> \< span class =fileinput-exists>更改< / span> \\< input class =fileimgvaltype =filename =brchrimg []> \< / span>'; $（'＃parent'）。append（html）;}）; <$ code>

 < 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>浏览档案< / span> < span class =fileinput-exists>更改< / span> < input class =fileimgvaltype =filename =brchrimg []> < / span>< / div>< Button id ='addMore'> Add More< / Button>  

p>



小提琴

I want to Validate File input field like size and extension.

I am appending more file input field based on the client requirment. See the screenshot

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

When I use the below function to check the file name and size. but it not working on dynamically created elements.

 <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);
  });

When User click on the Plus button a new upload field in generating and manipulating with that.

How can I get the filename and size in jquery ?

Thanks

解决方案

HTML 5 File API specification, some properties of files are accessible at client side and file size is one of them. So the idea is to use the size property and find out the file size. But as it is a part of HTML 5 specification so it will only work for modern browsers. [Ref]

Try this:

$(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

这篇关于使用动态创建的文件输入字段的Jquery文件验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！