使用 javascript 设置 PHP 表单数组变量

Question

我目前正在将一个 javascript 数组传递给一个表单，以便通过文件上传提交。

就目前而言，我已经能够将 javascript 数组传递给表单，但不是我想要的。

我存储在数组中的初始javascript值如下：

Folder 1/File 1.txt
Folder 1/Folder 2/File 2.txt

通过数组后，PHP 变量的输出如下：

Array ( [0] => Folder 1/File 1.txt,Folder 1/Folder 2/File 2.txt )

如果可能的话，我想做的是将数组更改为以下内容：

Array ( [0] => Folder 1/File 1.txt, 
        [1] => Folder 1/Folder 2/File 2.txt )

数组从 javascript 传递到的 HTML 代码：

<input type="hidden" id="pathArray" name="pathArray[]" value="pathArray">

当前的javascript代码：

    let picker = document.getElementById('picker');
    var pathStructure = [];
    var i = 0;
                                    
    picker.addEventListener('change', e =>
    {
        for (let file of Array.from(e.target.files))
        {
            pathStructure[i] = file.webkitRelativePath;
            i++;
        };

        document.getElementById('pathArray').value = pathStructure.toString();
    });

我目前遇到的主要问题是设置提交表单的数组位置值。我能够将数组输入到表单中，但无法设置单独的数组位置，并且到目前为止还无法找到有关如何以某种方式实现这一点的相关文档，如下所示：

let picker = document.getElementById('picker');
var pathStructure = [];
var i = 0;

picker.addEventListener('change', e =>
{
    for (let file of Array.from(e.target.files))
    {
        pathStructure[i] = file.webkitRelativePath;
        document.getElementById('pathArray').value[i] = pathStructure[i].toString();
        i++;
    };
});

任何帮助将不胜感激，如果需要任何进一步的细节，请告诉我，我会尽力扩展或提供任何其他信息！

Answer 1

toString 方法加入数组并返回一个字符串，其中包含每个数组元素，用逗号分隔。所以你丢失了数组信息。

我通常通过添加多个输入来做这样的事情：

<form id="form">
<input type="hidden" class="pathArray" name="pathArray[]">
<input type="hidden" class="pathArray" name="pathArray[]">
...
</form>

这个想法是为每个值创建一个新输入。您将输入Folder 1/File 1.txt，另一个输入Folder 2/File 2.txt，依此类推。最终的代码可能看起来像这样

let picker = document.getElementById('picker');
var pathStructure = [];
var i = 0;

picker.addEventListener('change', e =>
{
    for (let file of Array.from(e.target.files))
    {
        pathStructure[i] = file.webkitRelativePath;
        var input = document.createElement("input");
        input.type = 'hidden';
        input.name = 'pathArray[]';
        input.classList.add('pathArray');
        document.getElementById("form").appendChild(input);
        document.getElementsByClassName('pathArray')[i].value = pathStructure[i].toString();
        i++;
    };
});

希望你能明白。