0

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

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

5
  • webref.ru/html/input/accept
    – Visman
    16 авг 2017 в 16:39
  • 1
    Возможный дубликат вопроса: input file - показываем только файлы определенного типа
    – Visman
    16 авг 2017 в 16:49
  • @Visman accept - не единственное, что требуется ТС'у, поэтому ваша ссылка не совсем соответствует данному вопросу.
    – Cheg
    17 авг 2017 в 13:07
  • @Cheg, у TC два вопроса, а тут задают по одному вопросу за раз.
    – Visman
    17 авг 2017 в 13:42
  • Автор, вы что не помните что писали в вопросе? 1 вопрос Как сделать диалоговаое окно выбора файла (с тем расширением которое указано)? 2 вопрос И как ещё сделать, чтобы, после выбора .txt файла, текст из него выводился в тег p?
    – Visman
    17 авг 2017 в 15:57

1 ответ 1

2

Для фильтрации загружаемых файлов по определенному расширению используйте атрибут 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.