创建UL列以列出选定和上载文件中的文件

Question

所以我使用Php / Html将多个图像上传到文件夹。当用户选择多个文件时，它们列在一个列中，上传图像后上传相同，我会在完成与否的情况下回显文件名，并将它们列在一列中。我正在寻求帮助的是 - 我如何创建（比如3个或更多列示例），列出每列最多5个或更多。因此，如果用户选择了15个图像，那么列出的文件和Uploaded将有3列，每个列中将列出5个。这是一个例子和脚本。我也包括了一个理想的情况。我还想如果完成的上传列表像所选列一样。拜托，谢谢

Demo Here

脚本

<?php
$total = count($_FILES['filesToUpload']['name']);
$succes = [];
$error = [];
for($i=0; $i<$total; $i++) {
$tmpFilePath = $_FILES['filesToUpload']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./upimages/" . $_FILES['filesToUpload']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
    $succes[$_FILES['filesToUpload']['name'][$i]] = true;
}else{
    $errors[$_FILES['filesToUpload']['name'][$i]] = true;
} 
}
}
foreach(array_keys($succes) as $suc){
$myString = $suc." was succesfull,";
$myArray = explode(',', $myString);
foreach($myArray as $my_Array){
echo $my_Array.'<br>'; 
}
}
foreach(array_keys($errors) as $error){
echo $error." failed to upload";
}
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" accept="image/png, image/jpeg" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
<input type="hidden" name="MAX_FILE_SIZE" value="60000000" />
</div>
<p>
<strong>Files You Selected:</strong>
<ul id="fileList"><li>No Files Selected</li></ul>
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>

<style type="text/css">
.file-input-wrapper {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper > input[type="file"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper > .btn-file-input {
 display: inline-block;
 width: 400px;
 height: 125px;
 }
 .file-input-wrapper:hover > .btn-file-input {
 background-color: #aaa;
 }

 .file-input-wrapper1 {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper1 > input[type="submit"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper1 > .btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover > .btn-file-input1 {
background-color: #ffff00;
}
button {
font-size: 26px;
}
</style>

<script type="text/javascript">
function makeFileList() {
    var input = document.getElementById("filesToUpload");
    var ul = document.getElementById("fileList");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = input.files[i].name;
        ul.appendChild(li);
    }
    if(!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Files Selected';
        ul.appendChild(li);
    }
   }
 </script>

Answer 1

您需要三件事：表（<table>），根据所选文件计算列数，以及显示列的计数器。这是您的代码，只需复制粘贴并运行（更改在粗线■■■■■■■■■■■■■■■■■■■■■■■■■■■■之间）：

<?php
if ( isset( $_FILES['filesToUpload'] ) )
{
$total = count($_FILES['filesToUpload']['name']);
$succes = [];
$errors = [];
for($i=0; $i<$total; $i++) {
$tmpFilePath = $_FILES['filesToUpload']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./upimages/" . $_FILES['filesToUpload']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
    $succes[$_FILES['filesToUpload']['name'][$i]] = true;
}else{
    $errors[$_FILES['filesToUpload']['name'][$i]] = true;
} 
}
}
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
echo "<table border='1'>";
$columns = ceil( sqrt(count($succes) + count($errors)) ); // HOW MANY COLUMNS.
$counter = 0; // COLUMNS COUNTER.
foreach(array_keys($succes) as $suc){
if ( $counter == 0 ) echo "<tr>";
echo "<td>$suc was succesfull</td>";
$counter++;
if ( $counter == $columns ) // IF ROW WAS FILLED
   $counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
}
foreach(array_keys($errors) as $error){
if ( $counter == 0 ) echo "<tr>";
$counter++;
if ( $counter == $columns ) // IF ROW WAS FILLED
   $counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
echo "<td>$error failed to upload</td>";
}
echo "</table>";
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
} // if ( isset( $_FILES['filesToUpload'] ) )
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" accept="image/png, image/jpeg" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
<input type="hidden" name="MAX_FILE_SIZE" value="60000000" />
</div>
<p>
<strong>Files You Selected:</strong>
<!--■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->
<table id="tableList" border="1">
  <tr><td>No Files Selected</td></tr>
</table>
<!--■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>

<style type="text/css">
.file-input-wrapper {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper > input[type="file"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper > .btn-file-input {
 display: inline-block;
 width: 400px;
 height: 125px;
 }
 .file-input-wrapper:hover > .btn-file-input {
 background-color: #aaa;
 }

 .file-input-wrapper1 {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper1 > input[type="submit"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper1 > .btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover > .btn-file-input1 {
background-color: #ffff00;
}
button {
font-size: 26px;
}
</style>
<script type="text/javascript">
function makeFileList() {
    var input = document.getElementById("filesToUpload");
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    if ( input.files.length > 0 )
       { var tbl = document.getElementById("tableList"); // THE TABLE.
         var columns = Math.ceil( Math.sqrt( input.files.length ) ); // HOW MANY COLUMNS.
         var counter = 0; // COLUMNS COUNTER.
         tbl.innerHTML = ""; // DELETE ALL ROWS.
         for (var i = 0; i < input.files.length; i++) {
             if ( counter == 0 )
                var row = tbl.insertRow( -1 ); // -1 = INSERT ROW AT END OF TABLE.
             var cel = row.insertCell( -1 ); // -1 = INSERT CELL AT END OF ROW.
             cel.innerHTML = input.files[i].name; // DISPLAY FILE IN CELL.
             counter = counter + 1;
             if ( counter == columns ) // IF ROW WAS FILLED
                counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
       }
    }
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
}
</script>

编辑：现在还有另一个UPLOADED文件表，也删除了原始文件列表。