实战 上传文件json校验+拿到文件内容(TBC)

360 阅读1分钟

前端验证上传的文件为json

// 获取文件上传input元素
const fileInput = document.getElementById('fileInput');

// 监听文件上传事件
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  // 检查文件类型是否为json
  if (file.type === 'application/json') {
    // 这是一个JSON文件
    console.log('这是一个JSON文件');
    
    // 接下来你可以选择执行其他操作,比如上传文件到服务器
  } else {
    // 文件类型不是JSON
    alert('请上传一个JSON文件');
    // 清空文件输入框,防止错误文件被提交
    fileInput.value = '';
  }
});

拿到上传文件的具体内容

// 获取文件上传input元素
const fileInput = document.getElementById('fileInput');

// 监听文件上传事件
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  // 使用FileReader来读取文件内容
  const reader = new FileReader();
  
  reader.onload = (e) => {
    const content = e.target.result;
    console.log('文件内容:', content);
    
    // 接下来你可以对文件内容进行操作,比如解析成JSON
    const jsonData = JSON.parse(content);
    console.log('解析后的JSON:', jsonData);
  };
  
  reader.readAsText(file);
});