Question

我确信我的问题已经得到解答，但没有一个答案对我有帮助。对不起。

以下脚本允许我显示json的名称，大小，lastModifiedDate，但我无法设置加载的json的内容。

E.g。 var json = ...

我想要做的是使用json属性和值来绘制一些图形，但我不知道该怎么做..

有什么想法吗？

我正在尝试使用输入表单将json文件作为变量加载。

<!DOCTYPE html>
<html>
<body>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

</body>
</html>

Answer 1

您可以使用FileReader API。

阅读使用此代码选择的文件内容

var json = null;
var reader = new FileReader();
reader.readAsText(f, "UTF-8");
reader.onload = function (evt) {
  console.log(evt.target.result)
  try{
    json = JSON.parse(evt.target.result);
  }
  catch(e){
    alert('there was an error: ' + e);
  }
}

全部放在一起

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      var json = null;
      var reader = new FileReader();
      reader.readAsText(f, "UTF-8");
      reader.onload = function (evt) {
        console.log(evt.target.result)
        try{
          json = JSON.parse(evt.target.result);
        }
        catch(e){
          alert('there was an error: ' + e);
        }
      }
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 2

使用FileReader。此示例将json字符串创建为Object，然后遍历每个属性以在列表中显示它们。

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<output id="details"></output>
<script>
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            var r = new FileReader();
            r.readAsText(f);


            r.onload = function (e) {
                var json = e.target.result;
                var jObject = JSON.parse(json);
                var jObjectPropertyHtml = '<ul>';
                for (var propertyName in jObject) {
                    if (jObject.hasOwnProperty(propertyName)) {
                        var propertyHtml = '<li>' + propertyName + ':' + jObject[propertyName] + '</li>';
                        jObjectPropertyHtml += propertyHtml;
                    }
                }
                jObjectPropertyHtml += '</ul>';
                var html = document.getElementById('details').innerHTML + jObjectPropertyHtml;
                document.getElementById('details').innerHTML = html;
            }

            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '</li>');


        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

将json文件作为带有输入表单的变量加载

2 个答案: