【问题标题】：JavaScript : Selected File Names to JSON ArrayJavaScript：选择的文件名到 JSON 数组
【发布时间】：2019-07-12 14:07:08
【问题描述】：

我的背景是 Android 开发人员，但我热衷于在 HTML + PHP 中创建一个有用的 sn-p。

我发现以下 sn-p 可以从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 + '\n';
  }
  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>

我想做的事：

我想选择特定文件夹或多个文件（仅包含 webp 文件）并希望显示所选文件的 JSON 数组，如下所示：

[
    {
        "image_file":"1.webp",
        "emojis":[
            "☕",
            "????"
        ]
    },
    {
        "image_file":"2.webp",
        "emojis":[
            "????",
            "????"
        ]
    },
    {
        "image_file":"3.webp",
        "emojis":[
            "☕",
            "????"
        ]
    }
]

谁能帮忙？

【问题讨论】：

请评论你为什么不投票？有什么问题吗？
目前还不清楚您真正想知道什么。您已经展示了首先在客户端选择文件的 JavaScript 代码，然后展示了在服务器端执行此操作的 PHP 代码。不知道这两个不同的世界之间应该有什么联系。首先清楚明确地描述从哪里选择文件 - 客户端文件系统还是服务器文件系统？
检查已编辑的问题，希望它会完全清楚。
然后将文件收集到适当的数据结构中，而不是将它们写成列表项，最后将该数据结构编码为 JSON。
好的，谢谢。让我试试。

标签： javascript php html json file

【解决方案1】：

我得到的答案如下：

我只是一步步搜索，一一得到。

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 + '\n';
      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>

谢谢。

【讨论】：