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

您需要使用FileReader API。

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

其方法FileReader.readAsText()

readAsText方法用于读取指定Blob或File的内容。

注意：这是一个例子，它适用于现代浏览器

$(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手动解析文本，并在错误的情况下将其包装在try / catch周围格式

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

（代表OP发布解决方案）。

谢谢@Satpal我使用fileReader.readAsText（）和JSON.parse（）解决了它。

如何在angularjs中将变量的值设置为上传的文件json数据？

3 个答案: