[2021] 基于 Promise 的方法

Question

如何通过点击我网页上的按钮来上传JSON文件，说“导入”，并使用它存储在变量中以使用JavaScript进行更新。

我已经浏览了其他帖子，但找不到任何答案。

我正在使用此函数保存JSON变量：

function save(filename, data){

    if(!data) {
        alert('error : No data')
        return;
    }

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }

这样工作正常，它会在点击另一个按钮说“导出”时下载文件。如何上传此文件并生成此文件数据的JSON变量？

Answer 1

如果没有服务器端代码，您最好的方法可能是为用户提供textarea元素，以便将JSON复制/粘贴到其中，然后使用JSON.parse解析它。

您甚至可以使用类似Ace Editor的内容为JSON提供语法突出显示 - 您可以在Ace Editor Kitchen Sink Demo上查看它 - 从左上角的下拉列表中选择JSON

编辑：

原来我错了。这是一个演示正在使用的FileReader的小提琴，这正是您所需要的：

https://jsfiddle.net/Ln37kqc0/

以下是代码：

<强>使用Javascript：

document.getElementById('import').onclick = function() {
    var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }

  var fr = new FileReader();

  fr.onload = function(e) { 
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
  }

  fr.readAsText(files.item(0));
};

<强> HTML：

<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>

Answer 2

我有办法使用上传的json文件，这是我找到的方式。

$("#inputFile").change(function(e) {
    onChange(e);
});

function onChange(event) {
    var reader = new FileReader();
    reader.onload = onReaderLoad;
    reader.readAsText(event.target.files[0]);
}

function onReaderLoad(event){
    //alert(event.target.result);
    var obj = JSON.parse(event.target.result);
    alert(obj);
}

Answer 3

基本上传文件：

    <input id="contentFile" type="file" accept="application/json" />

  document.getElementById('contentFile').onchange = function(evt) {
        try {
            let files = evt.target.files;
            if (!files.length) {
                alert('No file selected!');
                return;
            }
            let file = files[0];
            let reader = new FileReader();
            const self = this;
            reader.onload = (event) => {
                console.log('FILE CONTENT', event.target.result);
            };
            reader.readAsText(file);
        } catch (err) {
            console.error(err);
        }
    }

Answer 4

您可能想添加可拖动选项

Firs创建您的HTML

<div class="drag" id="drag_area">
        <input class="box_file disabled" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
        <label for="file"><strong>Choose save file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
</div>

比写出您的JS

$("#drag_area").on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
})
.on('dragover dragenter', function () {
    $("#drag_area").addClass('dr_active');
    // this is needed if you wish to style your drag area on drag events
})
.on('dragleave dragend drop', function () {
    $("#drag_area").removeClass('dr_active');
    // this is needed if you wish to style your drag area on drag events
})
.on('drop', function (e) {
    let droppedFiles = e.originalEvent.dataTransfer.files;
    let reader = new FileReader()
    reader.readAsDataURL(droppedFiles[0])
    reader.onloadend = function () {
    $.ajax({
        url: reader.result,
        success: function (data) {
          console.log(JSON.parse(data)); // This is your JSON
        },
        error: function (request, error) {
            cliLog(2, "Upload", "Cant upload save file")
        }
    });
}
}),

Answer 5

尝试一下，效果完美

handleUploadFile = async(doc) => {
  let file = doc.target.files[0]
  let reader = new FileReader(file)

  // await reader.readAsDataURL(file)

  reader.readAsText(file)

  reader.onload = async(e) => {

    let aaa = e.target.result

    let content = await JSON.parse(aaa)
    console.log(content)

  }
}

Answer 6

我做了一个更通用的方法，支持在加载完成时自定义上传按钮标题和回调：

function uploadJson(id, callback) {
    document.getElementById(id).onchange = function(evt) {
        try {
            let files = evt.target.files;
            if (!files.length) {
                alert('No file selected!');
                return;
            }
            let file = files[0];
            let reader = new FileReader();
            const self = this;
            reader.onload = (event) => {
                callback(event.target.result);
            };
            reader.readAsText(file);
        } catch (err) {
            console.error(err);
        }
    }
}

uploadJson('importJson', function (json) {
    console.log(json);
});

<button onclick="document.getElementById('importJson').click()">import json</button>
<input id="importJson" value="import json" type="file" accept="application/json" style="display:none" />

Answer 7

[2021] 基于 Promise 的方法

如 here 所述，您可以使用较新的 blob api 通过以下方式轻松获取文件的值：

await blob.text()

const getJsonUpload = () =>
  new Promise(resolve => {
    const inputFileElement = document.createElement('input')
    inputFileElement.setAttribute('type', 'file')
    inputFileElement.setAttribute('multiple', 'true')
    inputFileElement.setAttribute('accept', '.json')
    
    inputFileElement.addEventListener(
      'change',
      async (event) => {
        const { files } = event.target
        if (!files) {
          return
        }

        const filePromises = [...files].map(file => file.text())

        resolve(await Promise.all(filePromises))
      },
      false,
    )
    inputFileElement.click()
  })


document.getElementById('upload-button').onclick = async () => {
    const jsonFiles = await getJsonUpload()
  console.log({jsonFiles})
}

<button id="upload-button">
Upload
</button>

上传JSON文件并使用它

7 个答案:

编辑：

[2021] 基于 Promise 的方法