Диалоговое окно выбора файла

406
18 августа 2017, 00:05

Как сделать диалоговаое окно выбора файла (с тем расширением которое указано)? Т.е. чтобы при нажатии на кнопку всплывало окно, в котором пользователь выберет файл для загрузки. К примеру, такое:

И как ещё сделать, чтобы, после выбора .txt файла, текст из него выводился в тег p?

Answer 1

Для фильтрации загружаемых файлов по определенному расширению используйте accept.

Код вывода имени файла взят с codrops и немного изменен под вопрос.

'use strict'; 
(function($, window, document, undefined) { 
  $('.upload input[type="file"]').each(function() { 
    var $input = $(this), 
      $label = $input.closest('.upload'); 
 
    $input.on('change', function(e) { 
      var fileName = ''; 
 
      if (this.files && this.files.length > 1) 
        fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
      else if (e.target.value) 
        fileName = e.target.value.split('\\').pop(); 
 
      if (fileName) 
        $label.find('p').html(fileName); 
      else 
        $label.find('p').html(''); 
    }); 
 
  }); 
})(jQuery, window, document);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label class="upload"> 
  <input type="file" accept="image/jpeg,image/png,image/gif" /> 
  <p class="filename"></p> 
</label> 
 
<label class="upload"> 
  <input type="file" data-multiple-caption="Файлов выбрано: {count}" multiple accept="image/jpeg,image/png,image/gif" /> 
  <p class="filename"></p> 
</label>

READ ALSO
Как получить индекс элемента массива

Как получить индекс элемента массива

Вам нужно создать замыкание, в котором хранить этот самый индекс, для этого addEventListener надо вынести в отдельную функцию в которою передавать...

321
Генерация дерева Nested Sets

Генерация дерева Nested Sets

Реализовать функцию drawNestedSetsTree(data, node), которая принимает на вход два аргумента:

541
Как закрыть все popover bootstrap

Как закрыть все popover bootstrap

Нажимаем первую картинкувторая не закрылась

257
Адаптивная ширина видео

Адаптивная ширина видео

Сайт на bootstrap, на сайте много видео с разной шириной, при просмотре на мобильных вылазит за границу экрана, ставлю width:100%, на мобильном ОК, а на ПК все...

314