Question

我是File API的新手。目前，我有一项任务是使用File API和拖放方法从json-file执行数据。 JSON文件示例：

[
    {
        "id":2,
        "name":"VoffCafe",
        "coordinates":{
            "latitude":56.629418,
            "longitude":47.893927
        }
    }
]

来自JSON文件的数据必须写入一些变量。

现在我有一个例子，它是我的任务的示例，但它显示图片，它被放在网页上。这个例子的脚本，在下面执行此操作：

<script>
  var holder = document.getElementById('holder'),
  state = document.getElementById('status');

  if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
  } else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
  }

  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
  reader = new FileReader();
  reader.onload = function (event) {
  console.log(event.target);
  holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
  };
</script>

完整页面示例，此脚本的作用位于：http://html5demos.com/file-api

如何重做此脚本以满足我的要求？

Answer 1

您可以将“本地JSON文件抓取器”的任务分为3个主要步骤：

1：文件选择器

在此示例中，ondrop事件作为我们的文件选择器运行。 see documentation here。

var holder = document.getElementById('holder');

   holder.ondrop = function (e) { 
   var file = e.dataTransfer.files[0]; //Gets the most recent dropped file 
   ...do FileReader stuff...
   return false; 
   }

2：文件阅读器

Javascript的Filereader由于其异步性质而常常让人感到困惑。长话短说：在下面的代码中，在reader.onload完成后调用reader.readAsText()函数。 see documentation here

var reader = new FileReader();
//.onload event is triggered each time the reading operation is successfully completed.
reader.onload = function (event) {
 ...do Parser stuff... 
}
reader.readAsText(file);//Passes reader the file to read as text (aka String)

第3。解析器

一旦你有一个要解析的字符串，将它变成一个对象就很简单JSON.parse()。在此示例中，只需使用event.target.result传入文件内容。

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

把它们放在一起

//JSON file (removed unnecessary brakets)  
{
    "id":2,
    "name":"VoffCafe",
    "coordinates":{
        "latitude":56.629418,
        "longitude":47.893927
    }
}

//HTML file
<script>
var holder = document.getElementById('holder'); 

/*
...Other stuff...
*/

//Step 1 : The File Selector
holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault(); // Keeps any default action the element from happening

    var file = e.dataTransfer.files[0];
    console.log(file);


    //Step 2 : The File Reader    
    var reader = new FileReader();
    reader.onload = function (event) {

        //Step : 3 The Parser 
        var parsedObj = JSON.parse(event.target.result);

        //example code : alerts all the methods of parsedObj.
        for(I in parsedObj) {
            if(parsedObj.hasOwnProperty(I)){
                alert(parsedObj[I]);
            }
        }
    };

    reader.readAsText(file);
    return false;
};
</script>

我希望有所帮助！

如何通过File API从json文件执行数据？

1 个答案:

把它们放在一起