web-dev-qa-db-fra.com

Accéder aux données du fichier JSON téléchargé à l'aide de JavaScript

J'ai un code html comme celui-ci:

<input type="file" id="up" />
<input type="submit" id="btn" />

Et j'ai un fichier JSON comme celui-ci:

{
 "name": "John",
 "family": "Smith"
}

Et une simple fonction JavaScript:

alert_data(name, family)
{
     alert('Name : ' + name + ', Family : '+ family)
}

Maintenant, je veux appeler alert_data() avec le nom et la famille stockés dans le fichier JSON qui a téléchargé à l'aide de mon entrée HTML.

Existe-t-il un moyen d'utiliser un lecteur de fichiers HTML5 ou autre chose?
Je n'utilise pas de programmation côté serveur, ils sont tous côté client.

javascriptjqueryhtmljson
21
Masoud

Vous aurez besoin d'un navigateur HTML5, mais c'est possible.

(function(){
    
    function onChange(event) {
        var reader = new FileReader();
        reader.onload = onReaderLoad;
        reader.readAsText(event.target.files[0]);
    }

    function onReaderLoad(event){
        console.log(event.target.result);
        var obj = JSON.parse(event.target.result);
        alert_data(obj.name, obj.family);
    }
    
    function alert_data(name, family){
        alert('Name : ' + name + ', Family : ' + family);
    }
 
    document.getElementById('file').addEventListener('change', onChange);

}());
<input id="file" type="file" />

<p>Select a file with the following format.</p>
<pre>
{
  "name": "testName",
  "family": "testFamily"
}    
</pre>
31
Sam Greenhalgh

Voici une version abrégée de la réponse de Sam Greenhalghs qui fonctionne pour moi.

$(document).on('change', '.file-upload-button', function(event) {
  var reader = new FileReader();

  reader.onload = function(event) {
    var jsonObj = JSON.parse(event.target.result);
    alert(jsonObj.name);
  }

  reader.readAsText(event.target.files[0]);
});
<input class='file-upload-button' type="file" />
6
Sam Whillance

Oui! Cela peut être fait avec HTML5 FileReader. Et c'est en fait assez simple.
Enregistrez le json en tant que fichier .js et chargez-le dans mon exemple

{
 "name": "John",
 "family": "Smith"
}

C'est là que la magie opère:

    $("#up").change(function(event){
    var uploadedFile = event.target.files[0]; 

     if(uploadedFile.type !== "text/javascript" && uploadedFile.type !== "application/x-javascript") { 
        alert("Wrong file type == " + uploadedFile.type); 
        return false;
    }

    if (uploadedFile) {
        var readFile = new FileReader();
        readFile.onload = function(e) { 
            var contents = e.target.result;
            var json = JSON.parse(contents);
            alert_data(json);
        };
        readFile.readAsText(uploadedFile);
    } else { 
        console.log("Failed to load file");
    }
});

function alert_data(json)
{
     alert('Name : ' + json.name + ', Family : '+ json.family)
}

Lien Fiddle avec ce code: http://jsfiddle.net/thomas_kingo/dfej7p3r/3/
(La vérification du fichier uploaded.type n'est testée que dans Chrome et firefox)

1
user2987016