纯前端环境下如何导入用户JSON文件数据到HTML并将各值设为变量

需求可行性 #

完全可以在纯前端环境实现，无需服务端支持，仅靠浏览器原生JS的File API就能完成文件读取、解析、赋值全流程。

具体实现步骤 #

1. 页面结构示例 #

<!-- 导入区域 -->
<input type="file" id="jsonFile" accept=".json" style="display:none;">
<button id="importBtn">导入数据</button>

2. JS逻辑实现 #

如果你需要直接生成和JSON键同名的全局变量，可以用以下代码：

const importBtn = document.getElementById('importBtn');
const jsonFileInput = document.getElementById('jsonFile');

// 点击按钮触发文件选择
importBtn.addEventListener('click', () => {
  jsonFileInput.click();
});

// 监听文件选择事件
jsonFileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  // 校验文件类型
  if (file.type !== 'application/json' && !file.name.endsWith('.json')) {
    alert('请上传合法的JSON文件');
    return;
  }
  // 读取文件内容
  const reader = new FileReader();
  reader.onload = (event) => {
    try {
      const jsonData = JSON.parse(event.target.result);
      // 遍历JSON属性，挂载到全局window对象生成同名变量
      Object.entries(jsonData).forEach(([key, value]) => {
        // 如果需要把字符串格式的数字转为数值类型，可以加以下判断
        if (!isNaN(Number(value)) && value.trim() !== '') {
          window[key] = Number(value);
        } else {
          window[key] = value;
        }
      });
      alert('数据导入成功');
      // 此时直接打印car就能拿到对应数值
      // console.log(car, ship, plane);
    } catch (err) {
      alert('JSON文件格式错误，请检查后重新上传');
    }
  };
  reader.readAsText(file);
});

更推荐的替代方案 #

直接挂载全局变量可能会和页面已有全局变量产生命名冲突，更安全的实现方式是把所有导入数据存在一个独立的命名空间对象里：

// 把上面的遍历赋值部分替换成以下代码
const gameData = {};
Object.entries(jsonData).forEach(([key, value]) => {
  if (!isNaN(Number(value)) && value.trim() !== '') {
    gameData[key] = Number(value);
  } else {
    gameData[key] = value;
  }
});
// 访问时用gameData.car、gameData.ship即可

注意事项 #

• 可以根据业务需要额外增加JSON字段合法性校验，避免上传不符合格式要求的文件
• 不需要兼容旧浏览器的话，也可以用await file.text()的更简洁语法读取文件内容

内容的提问来源于stack exchange，提问作者Random Kindle