创建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> 

编辑：现在有对上传的文件，也将被删除文件的原始列表中的另一台。