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

Question

How to check whether a JSON File is selected from the browser using match() function in javascript.

The below code snippet is used to check for image files:

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

I want the same for JSON files.

Answer 1

Here's the answer, 8 years later:

 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'/>

Actually, this only considers a file valid if it has the .json extension, and would consider files as invalid if they had valid JSON content but the wrong extension. It would also be fooled by files with invalid JSON but the correct extension.

The most reliable way to validate a JSON file, if you must do this client-side, is calling JSON.parse on the contents and checking if it throws an error:

 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' />