Question

对可克隆的<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[][]是多维的，如可以按.clonable 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 ▶} ] ]和0 1都是单个$request->file("attachments")的数组，因此循环有效。

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

attachment

这是出问题的地方; // $request->input("title"); array:1 [▼ 0 => "Testing" ] // $request->file("attachments"); array:2 [▼ 0 => array:1 [▶] 1 => array:1 [▶] ]是一个包含2 $request->file("attachments")的数组，每个数组都有1 arrays，因此UploadedFile只返回一次上传，即使有多个也是如此。每个$request->file("attachments.".$i);多个attachments：

进一步加剧了这种情况

.clonable

现在// $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 [▶] ]是一个包含4个$request->file("attachments")的数组，每个{1}都有1 array，分布在2 UploadedFile上。

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

Answer 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>

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

为什么呢？试想这样的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 }
}

Answer 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 ▶}
  ]
]

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

2 个答案: