JavaScript：选择的文件名为JSON数组

My background is Android Developer but Trying to Create one useful snippet in HTML + PHP as its my passion.

I found following snippet to choose files and display names from here

document.getElementById('files').addEventListener('change', function(e) {
  var list = document.getElementById('filelist');
  list.innerHTML = '';
  for (var i = 0; i < this.files.length; i++) {
    list.innerHTML += (i + 1) + '. ' + this.files[i].name + '
';
  }
  if (list.innerHTML == '') list.style.display = 'none';
  else list.style.display = 'block';
});

<input type="file" id="files" multiple />
<pre id="filelist" style="display:none;"></pre>

What I want to do:

I want to choose specific folder or multiple files (which contains ONLY webp files) and want to display JSON array of that selected files as below:

[

    {

        "image_file":"1.webp",

        "emojis":[

            "☕",

            "

I got the answer as below:

I just searched everything step by step and got it one by one.

document.getElementById('files').addEventListener('change', function(e) {
  jsonObj = [];
  //var list = document.getElementById('filelist');
  //list.innerHTML = '';
  if (this.files.length>30){
         alert("You can only upload a maximum of 30 files");
  } else {
    for (var i = 0; i < this.files.length; i++) {
      //list.innerHTML += (i + 1) + '. ' + this.files[i].name + '
';
      item = {}
      item ["image_file"] = this.files[i].name;
      item ["emoji"] = [];

      item ["emoji"].push("");
      item ["emoji"].push("");

      jsonObj.push(item);

    }
  
    //document.getElementById('json').append(JSON.stringify(jsonObj, null, 2));
  
        output(syntaxHighlight(JSON.stringify(jsonObj, undefined, 2)));
    
    //if (list.innerHTML == '') list.style.display = 'none';
    //else list.style.display = 'block';
  }
});

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

pre { outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

<input type="file" id="files" multiple accept=".webp" />
<br>
<br>
<br>
<div id="json"></div>

Thank you.

</div>