Question

我希望用户能够在那台计算机上选择一个JSON文件，然后应该将这个JSON文件提供给客户端Javascript。

如何使用FILE API执行此操作，最终目标是用户选择的JSON文件可用作对象，然后我可以在Javascript中使用它。这就是我到目前为止所做的：

JsonObj = null 



function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
     f = files[0];
      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         JsonObj = e.target.result
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }



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

FIDDLE ：http://jsfiddle.net/jamiefearon/8kUYj/

如何将变量JsonObj转换为适当的Json对象，可以将新字段添加到等等。

Answer 1

请勿通过readAsDataURL将数据作为“DataUrl”加载，而是使用readAsText然后通过JSON.parse()解析

e.g。

JsonObj = null 

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
     f = files[0];
      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         JsonObj = JSON.parse(e.target.result);
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
    }

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

使用HTML 5 File API加载JSON文件

1 个答案: