Извлечь данные из загруженного файла без отправки файла в JavaScript?

Question

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

Answer 1

Вот пример того, как получить доступ к содержимому файла.

function handleFileSelect(evt) {
  var files = evt.target.files;

  var f = files[0];

  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      // Do everything what you need with the file's content(e.target.result)
      console.log(e.target.result);
    };
  })(f);

  reader.readAsText(f);
}

document
  .getElementById("upload")
  .addEventListener("change", handleFileSelect, false);

Answer 2

Используйте файловый API HTML 5 и FileReader, он позволяет работать с файлами прямо в браузере.

Вот полный пример:

<input type="file" id="input" onchange="handleFiles(this.files)">
<div id="output">
</div>
<script type="text/javascript">

function handleFiles(files) {
  //$("#output").html("got: "+files[0].name);  
  var reader = new FileReader();

  reader.onload = function(e) {
    $("#output").html(reader.result);
  }

  reader.readAsText(files[0]); 
}
</script>

Пожалуйста, прочтите это: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

и прочитайте это: https://www.w3.org/TR/FileAPI/#APIASynch

Класс FileReader предоставляет следующие полезные методы:

interface FileReader: EventTarget {
  // async read methods
  void readAsArrayBuffer(Blob blob);
  void readAsBinaryString(Blob blob);
  void readAsText(Blob blob, optional DOMString label);
  void readAsDataURL(Blob blob);
  ....

Пожалуйста, прочитайте приведенные выше ссылки, они предоставятвсе примеры для вас.