将JSON文件放入输入类型文件后如何读取它

Question

我使用 XMLHttpRequest 创建了一个加载函数来读取 JSON 文件，并将其写入我的 HTML 文件中的 div 中。 （如果你愿意，这里有代码）

function load(file){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        // console.log(this);
        if(this.readyState == 4 && this.status == 200) {
            $("#personnage").empty();
            if(this.response.id == 1){
                $('#personnage').append(`<p>Sexe : ${this.response.sexe} </p>`);
                $('#personnage').append(`<p>Nom : ${this.response.nom} </p>`);
                $('#personnage').append(`<p>Prenom : ${this.response.prenom} </p>`);
                $('#personnage').append(`<p>Race : ${this.response.race} </p>`);
                $('#personnage').append(`<p>Age : ${this.response.age} </p>`);
                $('#personnage').append(`<p>Hobbies : ${this.response.hobbies} </p>`);
                $('#personnage').append(`<p>Metier : ${this.response.metier} </p>`);
                $('#personnage').append(`<p>Pouvoir/spécialisation : ${this.response.pouvoir} </p>`);
                $('#personnage').append(`<p>Histoire : ${this.response.histoire} </p>`);
            } else if (this.response.id == 2) {
                $('#personnage').append(`<p>Sexe : ${this.response.sexe} </p>`);
                $('#personnage').append(`<p>Nom : ${this.response.nom} </p>`);
                $('#personnage').append(`<p>Prenom : ${this.response.prenom} </p>`);
                $('#personnage').append(`<p>Race : ${this.response.race} </p>`);
                $('#personnage').append(`<p>Age : ${this.response.age} </p>`);
                $('#personnage').append(`<p>Hobbies : ${this.response.hobbies} </p>`);
                $('#personnage').append(`<p>Metier : ${this.response.metier} </p>`);
                $('#personnage').append(`<p>Forces : ${this.response.forces} </p>`);
                $('#personnage').append(`<p>Faiblesses : ${this.response.faiblesses} </p>`);
                $('#personnage').append(`<p>Objets : ${this.response.objets} </p>`);
                $('#personnage').append(`<p>Pouvoir/spécialisation : ${this.response.pouvoir} </p>`);
                $('#personnage').append(`<p>Histoire : ${this.response.histoire} </p>`);
            } else {
                alert("Erreur fichier non reconnu !");
            }
        } else if (this.readyState == 4 && this.status == 404) {
            console.log("Erreur")
        }
    }

    xhr.open("GET", file, true);
    xhr.responseType = "json"
    xhr.send();
}

但我希望用户使用<input type="file" />，而不是使用其他网站来存储 JSON（如 http://myjson.com/），但我不知道该怎么做。 （对不起，如果我犯了一些错误，英语不是我的主要语言）

Answer 1

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function processText(text) {
    try {
      var response = JSON.parse(text);
      $("#personnage").empty();
      if (response.id == 1) {
        $('#personnage').append(`<p>Sexe : ${response.sexe} </p>`);
        $('#personnage').append(`<p>Nom : ${response.nom} </p>`);
        $('#personnage').append(`<p>Prenom : ${response.prenom} </p>`);
        $('#personnage').append(`<p>Race : ${response.race} </p>`);
        $('#personnage').append(`<p>Age : ${response.age} </p>`);
        $('#personnage').append(`<p>Hobbies : ${response.hobbies} </p>`);
        $('#personnage').append(`<p>Metier : ${response.metier} </p>`);
        $('#personnage').append(`<p>Pouvoir/spécialisation : ${response.pouvoir} </p>`);
        $('#personnage').append(`<p>Histoire : ${response.histoire} </p>`);
      } else if (response.id == 2) {
        $('#personnage').append(`<p>Sexe : ${response.sexe} </p>`);
        $('#personnage').append(`<p>Nom : ${response.nom} </p>`);
        $('#personnage').append(`<p>Prenom : ${response.prenom} </p>`);
        $('#personnage').append(`<p>Race : ${response.race} </p>`);
        $('#personnage').append(`<p>Age : ${response.age} </p>`);
        $('#personnage').append(`<p>Hobbies : ${response.hobbies} </p>`);
        $('#personnage').append(`<p>Metier : ${response.metier} </p>`);
        $('#personnage').append(`<p>Forces : ${response.forces} </p>`);
        $('#personnage').append(`<p>Faiblesses : ${response.faiblesses} </p>`);
        $('#personnage').append(`<p>Objets : ${response.objets} </p>`);
        $('#personnage').append(`<p>Pouvoir/spécialisation : ${response.pouvoir} </p>`);
        $('#personnage').append(`<p>Histoire : ${response.histoire} </p>`);
      } else {
        alert("Erreur fichier non reconnu !");
      }
    } catch (error) {
      $('#personnage').append(`<p>Error : ${error.message} </p>`);
    }
  }
  function handleFileSelect(evt) {
    var files = evt.target.files;

    if (files == null || files.length == 0) return;
    var file = files[0];
    var reader = new FileReader();

    reader.onload = (function (theFile) {
      return function (e) {
        processText(e.target.result)

      };
    })(file);

    // Read in the image file as a data URL.
    reader.readAsText(file);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);


</script>

链接： https://www.html5rocks.com/en/tutorials/file/dndfiles/