具有多个属性的可克隆文件输入答案

【问题标题】：Clonable File Input with Multiple Attribute具有多个属性的可克隆文件输入
【发布时间】：2018-08-17 01:15:10
【问题描述】：

在使用可克隆的<input tpye="files" multiple> 元素时遇到了一些问题，特别是在 PHP 后端处理输入。给定以下形式：

<form method="POST" action="..." enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="clonable">
        <input type="text" class="form-control" name="title[]"/>
        <input type="file" class="form-control" name="attachments[][]" multiple/>
    </div>
</form>

注意title[] 是一个数组输入，因此可以上传多个titles（在克隆.clonable 之后），并且attachments[][] 是多维的，因为每个@987654327 可以上传多个文件@div。

这里有几个场景：

单个 .clonable 上传 1 个 attachment

// $request->input("title");
array:1 [▼
  0 => "Testing"
]

// $request->file("attachments");
array:1 [▼
  0 => array:1 [▼
    0 => UploadedFile {#27 ▶}
  ]
]

这是正确的上传结构；当我通过

循环输入时

for($i = 0; $i < $clonableCount; $i++) {

我可以访问标题和附件

$title = $request->input("title.".$i); // "Testing"
$attachments = $request->file("attachments.".$i); // array(1)[0 => UploadedFile]

一切都应该如此。

两个 .clonable 上传，每个上传 1 个 attachment

// $request->input("title");
array:2 [▼
  0 => "Testing"
  1 => "Testing 2"
]

// $request->file("attachments");
array:2 [▼
  0 => array:1 [▼
    0 => UploadedFile {#27 ▶}
  ]
  1 => array:1 [▼
    0 => UploadedFile {#28 ▶}
  ]
]

再一次，一切都很好，$request->file("attachments") 的 0 和 1 都是单个 UploadedFile 的数组，因此循环有效。

单个或多个.clonable，每个attachments 多个

// $request->input("title");
array:1 [▼
  0 => "Testing"
]

// $request->file("attachments");
array:2 [▼
  0 => array:1 [▶]
  1 => array:1 [▶]
]

这就是问题所在； $request->file("attachments") 是 2 个 arrays 的数组，每个都有 1 个 UploadedFile，所以 $request->file("attachments.".$i); 只会返回一个上传，即使有多个。这与每个.clonable 的多个attachments 进一步复杂化：

// $request->input("title");
array:2 [▼
  0 => "Testing"
  1 => "Testing 2"
]

// $request->file("attachments");
array:4 [▼
  0 => array:1 [▶]
  1 => array:1 [▶]
  2 => array:1 [▶]
  3 => array:1 [▶]
]

现在$request->file("attachments") 是一个由 4 个arrays 组成的数组，每个都有 1 个UploadedFile，分布在 2 个.clonable 上。

很长的问题，但基本上，我该如何处理这样的事情？我知道我可以在attachment[][] 中添加索引名称，例如attachment[0][] 和attachment[1][] 等，所以如果必须，我会这样做，但我想知道是否还有其他更优雅的解决方案。

【问题讨论】：

标签： javascript php jquery html laravel

【解决方案1】：

没有简单的方法。我只能这样说：

<div class="clonable">
    <input type="text" class="form-control" name="title[]"/>
    <input type="file" class="form-control" name="attachments[0][]" multiple/>
</div>
<div class="clonable">
    <input type="text" class="form-control" name="title[]"/>
    <input type="file" class="form-control" name="attachments[1][]" multiple/>
</div>

你应该在克隆时设置每个input file字段的name。

为什么？想想 PHP 代码是这样的：

$a = null;
$a[][] = 'x';
$a[][] = 'y';
$a[][] = 'z';
var_dump($a);

所以你看：

array(3) {
  [0] => array(1) { [0] => x }
  [1] => array(1) { [0] => y }
  [2] => array(1) { [0] => z }
}

【讨论】：

是的。这就是我害怕的。是的，关于 PHP 等价物的好点；当你以这种方式布局时，它是完全有意义的。

【解决方案2】：

正如预期的那样，索引attachments 是最好的方法。更新了我的克隆函数以包含以下内容：

// Adjusted class to `class="form-control attachments"` on `input`
function reindexAttachments(){
    $(".attachments").each(function(index){
        $(this).attr("name", "attachments[" + index + "][]");
    });
}

现在上传多个 .clonable 和多个 attachments 每个结果：

// $request->input("title");
array:2 [▼
  0 => "Testing"
  1 => "Testing 2"
]

// $request->file("attachments");
array:2 [▼
  0 => array:2 [▼
    0 => UploadedFile {#27 ▶}
    1 => UploadedFile {#28 ▶}
  ]
  1 => array:2 [▼
    0 => UploadedFile {#29 ▶}
    1 => UploadedFile {#30 ▶}
  ]
]

【讨论】：