我用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/),但我不知道该怎么做。 (很抱歉,如果我犯了一些错误,英语不是我的主要语言)
答案 0 :(得分:0)
<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>
LINK: https://www.html5rocks.com/en/tutorials/file/dndfiles/