javascript - 如何检查是否在 javascript 中选择了 JSON 文件？

Question

如何使用match()javascript 中的函数检查是否从浏览器中选择了 JSON 文件。

下面的代码片段用于检查图像文件：

<script>
var f=evt.target.files[0];
// Only process image files.
if (!f.type.match('image.*')) {
  alert('Please select Image Files only!');
}
</script>

我希望 JSON 文件也一样。

Answer 1

这是8年后的答案：

document.querySelector('input').onchange = function ({ target: { files: [file] } }) {
  if (file.type != 'application/json') {
    alert('Please select JSON files only!');
    this.value = '';
    return;
  }

  // for displaying the contents of the file
  const reader = new FileReader();
  reader.onload = ({ target: { result } }) => console.log(result);
  reader.readAsText(file);
};

<input type='file'/>

实际上，这仅在文件具有扩展名时才认为文件有效，如果文件具有有效内容但扩展名错误.json，则认为文件无效。JSON它也会被具有无效JSON但正确扩展名的文件所欺骗。

JSON如果您必须在客户端执行此操作，验证文件的最可靠方法是调用JSON.parse内容并检查它是否引发错误：

const validateJSON = data => {
  try { JSON.parse(data); }
  catch { return false; }
  return true;
}

document.querySelector('input').onchange = function ({ target: { files: [file] } }) {
  const reader = new FileReader();
  reader.onload = ({ target: { result } }) => {
    if (!validateJSON(result)) {
      alert('Please select JSON files only!');
      this.value = '';
      return;
    }
    // display the contents of the file
    console.log(result);
  }
  reader.readAsText(file);
};

<input type='file' />