Как установить значение переменной для загрузки файлов json в angularjs?

Question

Я новичок в angularJS. Я хочу, чтобы загрузить файл в формате JSON с помощью <input type="file"onchange="angular.element(this).scope().uploadFile(this.files)"/>

, и я пытаюсь получить доступ к его данным в контроллере, как это:

$scope.uploadFile = function(files) { 

$scope.jsonData = files[0].data; 

}; 

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

Answer 1

Вам необходимо использовать API FileReader.

Объект FileReader позволяет веб-приложениям асинхронно считывать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя.

Его метод FileReader.readAsText()

Метод readAsText используется для чтения содержимого указанного Blob или файла.

Примечание: Ниже приведен пример, он работает в современных браузерах

$(document).ready(function() { 
 
    $('#file').change(function(e) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     console.log(e.target.result); 
 
     
 
     //if you want in JSON use  
 
     //var json = JSON.parse(e.target.result) 
 
    } 
 
    reader.readAsText(this.files[0]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="file" name="file" />

Answer 2

Просто Другой способ обойти ... если вы не хотите использовать FileReader и вручную разобрать текст, используя JSON.parse, а также обернуть его вокруг попытки/улова в случае неправильного формата

// simulate a file `file = files[0]` 
 
var file = new Blob(['{"hello": "world"}']) 
 

 
new Response(file).json().then(
 
    json => console.log(json), 
 
    err => console.error("invalid json data") 
 
)

Или с помощью Screw-FileReader

// simulate a file `file = files[0]` 
 
var file = new Blob(['{"hello": "world"}']) 
 

 
file.json().then(json => console.log(json))

<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script>

Answer 3

(Добавлено решение от имени ОП).

Спасибо @Satpal Я решил его использовать fileReader.readAsText() и JSON.parse().