Передать данные из HTML в JS [закрыт]

237

23 октября 2021, 18:50

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 1 год назад.

Улучшить вопрос

У меня есть определённая задача: взять из страницы HTML файл, который загрузил пользователь (это будет текст форматов .txt или .json), а в другом файле js считать этот файл и записать в переменную. Нужно или чтобы из html передавало в js или чтобы запоминался путь который выбрал пользователь, а потом в js задать этот же путь.

HTML:

<h1>Выберите файл!</h1>
<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choosefile</label>
</div>

Подробнее опишите связку HTML -> JS и обратно, как взаимодействовать, желательно без ajex, jquery и прочих.

P.s Это разрабатывается не для браузера, а программы на ПК.

Заранее спасибо!

Answer 1

Вам нужно работать с объектом FileReader. А саму операцию чтения файла производить в обработчике события onchange

document.addEventListener('DOMContentLoaded', function() { 
  const fileInput = document.getElementById('customFile'); 
 
  fileInput.addEventListener('change', function() { 
    const selectedFile = fileInput.files[0]; 
    const reader = new FileReader(); 
    reader.onload = function(e) { 
      console.log(e.target.result); 
    }; 
 
    reader.readAsText(selectedFile); 
  }); 
});

<h1>Выберите файл!</h1> 
<div class="custom-file"> 
  <input type="file" class="custom-file-input" id="customFile"> 
  <label class="custom-file-label" for="customFile">Choosefile</label> 
</div>