Подтверждение загрузки нескольких файлов с использованием javascript / jQuery - PullRequest
Новая
       5

Подтверждение загрузки нескольких файлов с использованием javascript / jQuery

0 голосов
/ 01 ноября 2018

просто пытается выполнить базовую проверку для нескольких загрузок файлов. это проверяет только первый файл. Я не могу найти, где я сделал ошибку. Помогите мне с проверкой формы.

Обновлен фактический сценарий кода.

HTML 

<form id="img_multiple">
   <div id="append">
      <input type="file" name="img[]" id="img" class="img" />
   </div>
   <button class="add_img">Add</button> 
   <input type="submit" />
</form>

JS 

$(document).on('click', '.add_img', function(){
   var html = '';
   var html = '<input type="file" name="img[]" id="img" class="img" />';
   $('#append').append(html);
});

$(document).on('submit', '#img_multiple', function(e){
   e.preventDefault();
   if($(".img").val() != '')
   {
   var count_of = $(".img").get(0).files.length;
   alert(count_of);
   for (var i = 0; i < $(".img").get(0).files.length; ++i)
   {
       var img =$(".img").get(0).files[i].name;
       var img_file_size=$(".img").get(0).files[i].size;
       if(img_file_size<10485760)
       {
          var img_ext = img.split('.').pop().toLowerCase();
          if($.inArray(img_ext,['jpg','jpeg','pdf','png'])===-1)
          {
             od_error = 'Yes';
             $('#img_err').html("<span class='text-danger'>File ("+img+") type not allowed.</span>");
          }
          else
          {
             $('#img_err').html("");
          }
       }
       else
       {
          od_error = 'Yes';
          $('#img_err').html("<span class='text-danger'>File("+img+") size is too big.</span>");
       }    
    }  
 }
 else
 {
   od_error = 'Yes';
   $('#img_err').html("<span class='text-danger'>Upload documents</span>");
 }
});

1 Ответ

0 голосов
/ 01 ноября 2018

Вместо id='img' попробуйте class='img' и вместо #img используйте .img. Вы получаете ошибку, потому что идентификатор может использоваться только в одном элементе, но в этом случае вы использовали один и тот же идентификатор для 3 элементов.

Вы также можете использовать атрибут accept="image/*"

РЕДАКТИРОВАТЬ: Вместо вашего 

$(document).on('submit', '#img_multiple', function(e)

Попробуйте этот код вместо 

$('.img').on('change', function(){
   if($(this).val() != '')
   {
   var count_of = $(this).get(0).files.length;
   alert(count_of);
   for (var i = 0; i < $(this).get(0).files.length; ++i)
   {
       var img =$(this).get(0).files[i].name;
       var img_file_size=$(this).get(0).files[i].size;
       if(img_file_size<10485760)
       {
          var img_ext = img.split('.').pop().toLowerCase();
          if($.inArray(img_ext,['jpg','jpeg','pdf','png'])===-1)
          {
             od_error = 'Yes';
             $('#img_err').html("<span class='text-danger'>File ("+img+") type not allowed.</span>");
          }
          else
          {
             $('#img_err').html("");
          }
       }
       else
       {
          od_error = 'Yes';
          $('#img_err').html("<span class='text-danger'>File("+img+") size is too big.</span>");
       }    
    }  
 }
 else
 {
   od_error = 'Yes';
   $('#img_err').html("<span class='text-danger'>Upload documents</span>");
 }
});

Также отредактируйте HTML-код, в котором вы поместили кнопку, как 

<button type='button' class="add_img">Add</button>
...