PHP - 从不同的输入字段获取文件，但到同一个 arrray-解网

问：

我正在为房地产中介设计一个网站，在我的表格中，我正在拍摄几个“平面图”。

在表单中，有一个“添加平面图按钮”，此按钮广告用于拍摄平面图的输入字段（平面图的 1 张图像和 1 个名称）

这是形式（不介意元素）：<form>

<div class="floorPlan">
        <label for="floorPlanPhoto" class="form-label">Floor Plan Photo</label>
        <input type="file" name="floorPlanPhoto[]" id="floorPlanPhoto" class="form-control" required>
        <label for="floorPlanName" class="form-label mt-1 mb-1">Kat Plan Name</label>
        <input type="text" name="floorPlanName" id="floorPlanName" class="form-control" required>
</div>

正如我之前提到的，用户可以添加多个平面图。因此，在我的中，可以有 1 个以上的输入字段用于添加平面图。<div class="floorPlans"></div>

如果用户仅添加 1 个平面图并提交表单，则会根据需要保存平面图（照片被保存并重命名为平面图名称）。但是，如果用户添加 2 个或更多计划，则仅保存最后一个计划。

当用户提交时，该字段被重写，我认为不是附加的。这可能是原因。所以我应该保存成多张照片floorPlanPhoto[]floorPlanPhoto[]

我该怎么做，或者用任何其他算法来做到这一点？

PS：我不想在输入字段中拍摄多个（我的意思是一个带有多个标签的输入区域）图像。用户应尽可能多地添加平面图（1 张图片和 1 个名称）。

这是保存文件的代码：

if(isset($_FILES["floorPlanPhoto"])){
    $images = $_FILES["floorPlanPhoto"];
    $imagesCount = count($images["name"]);
    $floorPlanName = $_POST["floorPlanName"];
    
    if (!file_exists("projects/" . $projectlink . "/floorplans")) {
        mkdir("projects/" . $projectlink . "/floorplans");
    }
    
    for ($i = 0; $i < $imagesCount; $i++) {
        $targetDir = "projects/" . $projectlink . "/floorplans/";
        $targetFile = $targetDir . basename($_FILES["floorPlanPhoto"]["name"][$i]);
        $uploadOk = 1;
        $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
    
        //Check if the image file is actually image or fake image
        $check = getimagesize($_FILES["floorPlanPhoto"]["tmp_name"][$i]);
        if ($check !== false) {
            $uploadOk = 1;
        } else {
            $uploadOk = 0;
        }
    
        if ($uploadOk == 0) {
            $errors["imageError"] = "Error ";
        } else {
            if (move_uploaded_file($_FILES["floorPlanPhoto"]["tmp_name"][$i], $targetFile)) {
                $errors["imageSuccess"] = "Success!";
                rename($targetFile, $targetDir . $floorPlanName . ".jpg");
            } else {
                $errors["imageError"] = "Error.";
            }
        }
    
        print_r($errors);
    }

GIF - 添加平面图字段（如您所见，用户单击按钮，新字段将添加到页面中。以便用户可以提交计划的图像及其名称。

var_dump[$_FILES]（提交2张平面图时）

array(2) { 
    ["projectImages"]=> array(6) { 
        ["name"]=> array(2) { 
            [0]=> string(5) "2.jpg" 
            [1]=> string(5) "3.jpg" 
        } 
        ["full_path"]=> array(2) { 
            [0]=> string(5) "2.jpg" 
            [1]=> string(5) "3.jpg" 
        } 
        ["type"]=> array(2) { 
            [0]=> string(10) "image/jpeg" 
            [1]=> string(10) "image/jpeg" 
        } 
        ["tmp_name"]=> array(2) { 
            [0]=> string(24) "C:\xampp\tmp\phpE5A1.tmp" 
            [1]=> string(24) "C:\xampp\tmp\phpE5B2.tmp" 
        } 
        ["error"]=> array(2) { 
            [0]=> int(0) 
            [1]=> int(0) 
        } 
        ["size"]=> array(2) { 
            [0]=> int(390388) 
            [1]=> int(231082) 
        } 
    } 
    ["floorPlanPhoto"]=> array(6) { 
        ["name"]=> array(2) { 
            [0]=> string(8) "plan.jpg" 
            [1]=> string(9) "plan2.jpg" 
        } 
        ["full_path"]=> array(2) { 
            [0]=> string(8) "plan.jpg" 
            [1]=> string(9) "plan2.jpg" 
        } 
        ["type"]=> array(2) { 
            [0]=> string(10) "image/jpeg" 
            [1]=> string(10) "image/jpeg" 
        } 
        ["tmp_name"]=> array(2) { 
            [0]=> string(24) "C:\xampp\tmp\phpE5B3.tmp" 
            [1]=> string(24) "C:\xampp\tmp\phpE5B4.tmp" 
        } 
        ["error"]=> array(2) { 
            [0]=> int(0) 
            [1]=> int(0) 
        } 
        ["size"]=> array(2) { 
            [0]=> int(53386) 
            [1]=> int(58397) 
        } 
    }
} 

array(2) { 
    ["projectImages"]=> array(6) { 
        ["name"]=> array(2) { 
            [0]=> string(5) "2.jpg" 
            [1]=> string(5) "3.jpg" 
        } 
        ["full_path"]=> array(2) { 
            [0]=> string(5) "2.jpg" 
            [1]=> string(5) "3.jpg" 
        } 
        ["type"]=> array(2) { 
            [0]=> string(10) "image/jpeg" 
            [1]=> string(10) "image/jpeg" 
        } 
        ["tmp_name"]=> array(2) { 
            [0]=> string(24) "C:\xampp\tmp\phpE5A1.tmp" 
            [1]=> string(24) "C:\xampp\tmp\phpE5B2.tmp" 
        } 
        ["error"]=> array(2) { 
            [0]=> int(0) 
            [1]=> int(0) 
        } 
        ["size"]=> array(2) { 
            [0]=> int(390388) 
            [1]=> int(231082) 
        } 
    } 
    ["floorPlanPhoto"]=> array(6) { 
        ["name"]=> array(2) { 
            [0]=> string(8) "plan.jpg" 
            [1]=> string(9) "plan2.jpg" 
        } 
        ["full_path"]=> array(2) { 
            [0]=> string(8) "plan.jpg" 
            [1]=> string(9) "plan2.jpg" 
        } 
        ["type"]=> array(2) { 
            [0]=> string(10) "image/jpeg" 
            [1]=> string(10) "image/jpeg" 
        } 
        ["tmp_name"]=> array(2) { 
            [0]=> string(24) "C:\xampp\tmp\phpE5B3.tmp" 
            [1]=> string(24) "C:\xampp\tmp\phpE5B4.tmp" 
        } 
        ["error"]=> array(2) { 
            [0]=> int(0) 
            [1]=> int(0) 
        } 
        ["size"]=> array(2) { 
            [0]=> int(53386) 
            [1]=> int(58397) 
        } 
    } 
}

JavaScript 代码适用于 Button 单击以添加平面图的输入字段：

var floorPlanField = `
        <label for="floorPlanPhoto" class="form-label">Kat Planı Fotoğrafı</label>
        <input type="file" name="floorPlanPhoto[]" id="floorPlanPhoto" class="form-control" required>
        <label for="floorPlanName" class="form-label mt-1 mb-1">Kat Planı İsmi</label>
        <input type="text" name="floorPlanName" id="floorPlanName" class="form-control" required>
        <button class="btn btn-danger mt-1 mb-1 removeFloorPlanArea">Kaldır</button>`;

var addFloorPlanButton = document.getElementById("addFloorPlan");
var floorPlans = document.getElementsByClassName("floorPlans")[0];

addFloorPlanButton.addEventListener("click", addFloorPlan);

function addFloorPlan() {
    var floorPlan = document.createElement("div");
    floorPlan.classList.add("floorPlan");
    floorPlan.innerHTML = floorPlanField;
    var created = floorPlans.appendChild(floorPlan);
}

javascript php html 表单 dom

//first approach, it WORKS
var addFloorPlanButton = document.getElementById("addFloorPlan");
var floorPlans = document.getElementsByClassName("floorPlans")[0];

addFloorPlanButton.addEventListener("click", addFloorPlan);

let totalFloorPlan = 1;

function addFloorPlan() {
  var floorPlan = document.createElement("div");
  floorPlan.classList.add("floorPlan");
  floorPlan.innerHTML = createInputField(`floorPlanName${totalFloorPlan}`);
  totalFloorPlan++;
  var created = floorPlans.appendChild(floorPlan);
  var removeFloorPlanButton = created.getElementsByClassName("removeFloorPlanArea")[0];
  removeFloorPlanButton.addEventListener("click", removeFloorPlan);
}

function createInputField(name) {
  var floorPlanField = `
        <label for="floorPlanPhoto" class="form-label">Kat Planı Fotoğrafı</label>
        <input type="file" name="floorPlanPhoto[]" class="form-control" required>
        <label for="floorPlanName" class="form-label mt-1 mb-1">Kat Planı İsmi</label>
        <input type="text" name="${name}" class="form-control" required>
        <button class="btn btn-danger mt-1 mb-1 removeFloorPlanArea">Kaldır</button>
    `;
  return floorPlanField;

而且，后端对我的文件处理程序进行了迷你更新：

if(isset($_FILES["floorPlanPhoto"])){
            $images = $_FILES["floorPlanPhoto"];
            $imagesCount = count($images["name"]);
            
            if (!file_exists("projects/" . $projectlink . "/floorplans")) {
                mkdir("projects/" . $projectlink . "/floorplans");
            }
            
            for ($i = 0; $i < $imagesCount; $i++) {
                $floorPlanName = $_POST["floorPlanName" . $i+1]; //Take the plan name for every file -change is here-
                $targetDir = "projects/" . $projectlink . "/floorplans/";
                $targetFile = $targetDir . basename($_FILES["floorPlanPhoto"]["name"][$i]);
                $uploadOk = 1;
                $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));

                $check = getimagesize($_FILES["floorPlanPhoto"]["tmp_name"][$i]);
                if ($check !== false) {
                    $uploadOk = 1;
                } else {
                    $uploadOk = 0;
                }

                if ($uploadOk == 0) {
                    $errors["imageError"] = "Error";
                } else {
                    if (move_uploaded_file($_FILES["floorPlanPhoto"]["tmp_name"][$i], $targetFile)) {
                        $errors["imageSuccess"] = "Success";
                        rename($targetFile, $targetDir . $floorPlanName . ".jpg");
                    } else {
                        $errors["imageError"] = "Error.";
                    }
                }
            }
        }

这需要每一个图像和名称，并在后端进行操作。

上一个：Laravel，如何更改/重新排列数据表按钮和记录条目？

下一个：是否可以使用 COM php 类和 IE 解析特定的 div 内容？

PHP - 从不同的输入字段获取文件，但到同一个 arrray

PHP - Take file from different input fields, but to the same arrray

评论