Question

我想获取并阅读将由用户上传的JSON文件。

我创建了html输入文件：

<div id="button_open" class="button">
    <span>Open a JSON file</span>
    <input id="input_open" class="input_file" type="file">
</div>

现在，我不知道如何从文件中加载数据。我只能得到文件名。

这是我写的：

$(document).ready(function(){
    $("#input_open").change(onOpenChange);
})

function onOpenChange(e) {
    var filname = $("#input_open").val();
    var fileContent = ... ?
    var jsonData = JSON.parse(fileContent);
}

任何人都知道如何获取文件内容？

Answer 1

    <script>
 $(document).ready(function(){
        $("#input_open").change(onOpenChange);
    })

    function onOpenChange(e) {
        var filname = $("#input_open").val();
        var fileContent = getTxt();
        var jsonData = JSON.parse(fileContent);
    }
    getTxt = function (){

      $.ajax({
      url:'text.json',
      success: function (data){
          fileContent =data;           
          return data 
      }
      });
    }
    </script>

Answer 2

这是我在Ameen的帮助下得到的解决方案：

    $(document).ready(function(){

    $("#input_open").change(onOpenChange);

})

function onOpenChange() {
    var filePath = $("#input_open").val();
    var startIndex = filePath.indexOf('\\') >= 0 ? filePath.lastIndexOf('\\') : filePath.lastIndexOf('/');
    var filename = filePath.substring(startIndex);
    if(filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }

    $.ajax({
        url: filename,
        success: onOpenLoad
    });
}

function onOpenLoad(fileContent) {
    var data = JSON.parse(fileContent);
    // do something with the data
}

从用户输入加载JSON文件

2 个答案: