Доступ к данным загруженного файла JSON с использованием JavaScript

У меня есть HTML-код, как это:

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

И у меня есть файл JSON, как это:

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

И простая функция JavaScript:

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

Теперь я хочу вызвать alert_data() с именем и семейством, которые хранятся в файле JSON, который загружен с использованием моего ввода HTML.

Есть ли способ использовать средство чтения файлов HTML5 или что-то еще?
Я не использую программирование на стороне сервера, все они на стороне клиента.

Ответ 1

Вам понадобится браузер HTML5, но это возможно.

(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>

Ответ 2

Здесь короткая версия Sam Greenhalghs отвечает, что работает для меня.

$(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" />

Ответ 3

Оп! Это можно сделать с помощью HTML5 FileReader. И это на самом деле довольно просто.
Сохраните json как .js файл и загрузите его в моем примере

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

Здесь происходит волшебство:

    $("#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)
}

Ссылка на этот код: http://jsfiddle.net/thomas_kingo/dfej7p3r/3/
(Проверка uploadedFile.type проверена только в Chrome и firefox)