Проверка файла Jquery с динамически созданным вводом файлов Поля

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

Когда пользователь нажимает на кнопкуPlus новое поле для загрузки в генерации и манипулирования с этим.

Как я могу получить имя файла и размер в 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