具有動態創建的文件輸入字段的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);
  });

當用戶單擊加號按鈕時，將在生成和操作中使用一個新的上載字段。

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

謝謝

Answer 1

HTML 5文件API規范，文件的某些屬性可在客戶端訪問，文件大小是其中之一。 因此，想法是使用size屬性並找出文件大小。 但是由於它是HTML 5規范的一部分，因此僅適用於現代瀏覽器。 [參考文獻]

嘗試這個：

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

在這里擺弄