Чтение файла из тега ввода html в переменную

Question

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

<input type="button" value="decrypt" id="decryptbutton">

function decrypt() {
    const selectedFile = document.getElementById('input').files[0];
    var fr = new FileReader();
    let ciphertext = fr.readAsText(selectedFile);
    decrypt(ciphertext, key);

}

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

Answer 1

Это то, что вы ищете?

Причина, по которой у вас возникают проблемы, заключается в том, что возвращаемое значение - promise, которого пока нет, пока обещание не разрешится. Чтобы обойти это, нужно установить значение в функции, которую вы вызываете при успешном выполнении обещания .then( res => { theFunctionToSetValue(res) }); Затем вы устанавливаете переменную / inner HTML с помощью функции, которая вызывается при успехе.

С помощью код, который я предоставил, вы бы назвали decipher внутри из setOutput()

document.addEventListener("DOMContentLoaded", function() {
  const uploadBtn = document.getElementById("upload");
  const output = document.getElementById("output");
  var outputText;
  
  function setOutput(response) {
    outputText = response;
    output.innerHTML = outputText;
  };

  uploadBtn.addEventListener("change", function() {
    var fr = new FileReader();
    fr.onload = function() {
    uploadBtn.textContent = fr.result;
    }
    outputText = uploadBtn.files[0].text().then( res => { setOutput(res) });
  });
});

<input type="file" id="upload">
<div id="output"></div>