javascript - 创建 UL 列以列出所选文件和上传文件中的文件

Question

所以我使用 Php/Html 将多个图像上传到文件夹。当用户选择多个文件时，它们会列在单列中，上传图像后上传也是如此，我会回显文件名是否完整，并且它们会列在单列中。我请求帮助的是-我如何创建(假设3个或更多列示例)在每列中列出最多5个或更多。因此，如果用户选择 15 张图像，则列出的文件和上传的文件将有 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>

编辑:现在有另一个表用于上传的文件，原始文件列表也已删除。