时间戳

首页 > 解决方案 > 创建系统图库照片

php - 创建系统图库照片

问题描述

我正在尝试创建一个产品照片系统，管理员如果想添加删除或更改照片的位置，他会通过表单执行所有操作。

形式：

<form role="form" id="editProductForm" enctype="multipart/form-data">
    <div id="SubPhotos" class="mt-3" style="overflow: auto;  white-space: nowrap;">
        <hr>
        <div class="form-group mt-0 col-md-3">
            <label for="uploadPhoto" class="btn btn-primary" role="button" style="cursor:pointer">Add Photo <i class="fas fa-plus"></i></label>
            <input type="file" id="uploadPhoto" onchange="readURL(this);" style="display:none;">
        </div>
        <div class="d-flex">
            <label><span id="badgeMainPicture" class='badge badge-primary ml-2'>Main Picture</span></label>
            <label class="ml-auto"><span id="badgeTotalPhotos" class='badge badge-secondary'>Amount of Photos: <?php echo count($productImages) ?> de 10</span></label>
        </div>
        <div id="droppable" style="display: flex;">
            <?php $index = 1;
            for ($i = 0; $i < count($productImages); $i++) { ?>
                <div id="photo<?php echo $index ?>" class="form-group col-lg-3 draggable">
                    <img id="preview-img" <?php echo isset($productImages[$i]) ? 'src="' . $site . $productImages[$i]['ImagePath'] . '"' : '' ?> height="300px" width="242px" />
                    <button id="removerPhoto<?php echo $index ?>" class="btn btn-danger btn-removerPhoto shadow-lg" type="button" onclick="removePhoto(<?php echo $index ?>)"><i class="fas fa-times"></i></button>
                </div>
            <?php
                $index++;
            } ?>
        </div>
    </div>
    <hr>
    <div class="d-flex">
        <button type="submit" id="editProduct" class="ml-auto mr-auto btn btn-primary mt-5">Modify Product</button>
    </div>
</form>

包含删除按钮，可拖动以更改位置和添加照片，一切正常 CLIENT-SIDE

提交表格后：

 $("#editProductForm").submit(function(e) {
            e.preventDefault();

            var index = 1;
            $(".draggable").each(function() {
                var image = $(this).find("#preview-img").attr("src");
                var id = $(this).attr("id").substring(4);
                if (image.indexOf("https://") > -1) {
                    $("#photo" + id).attr("id", "photo" + index);
                } else {
                    $("#picture" + id).attr("name", "picture" + index);
                }
                index++;
            });

            var formData = new FormData(this);

            var index = 1;
            $(".draggable").each(function() {
                var image = $(this).find("#preview-img").attr("src");
                var id = $(this).attr("id").substring(4);
                if (image.indexOf("https://") > -1) {
                    formData.append('picture' + index, image);
                } else {
                    $("#picture" + id).attr("name", "picture" + index);
                }
                index++;
            });
            $.post({
                url: '<?php echo $site ?>/admin/painel/modifyproduct.php',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {

                }
            });
        });

现在问题来了，我的代码有错误，我不知道如何解决 SERVER-SIDE：

function createImage($id, $productCategory)
{
    global $db;


    $db->query("DELETE FROM pictures WHERE ProductID='$id'");

    if (!file_exists("../../../pictures/produtos/$productCategory/MTA$id/")) {
        mkdir("../../../pictures/produtos/$productCategory/MTA$id/", 0777, true);
    }

    $position = 0;
    for ($i = 1; $i <= 10; $i++) {
        if (isset($_FILES['picture' . $i])) {
            $file = $_FILES['picture' . $i]['tmp_name'];

            $nameFile = "picture" . $position;

            $patchImage = "/pictures/produtos/$productCategory/MTA$id/$nameFile.png";

            move_uploaded_file($file, "../../.." . $patchImage);

            saveImageInDataBase($id, $patchImage, $position);
            $position++;
        } else if (isset($_POST['picture' . $i])) {
            $file = $_POST['picture' . $i];

            $nameFile = "picture" . $position;

            $oldName = "../../../" . substr($file, strpos($file, 'pictures/'));

            rename($oldName, "../../../pictures/produtos/$productCategory/MTA$id/$nameFile.png");

            saveImageInDataBase($id, "/pictures/produtos/$productCategory/MTA$id/$nameFile.png", $position);
            $position++;
        }
    }
}

错误：有一个错误，当文件夹中已经有一张同名的照片（与位置）并且另一张照片被放置在相同的位置（move_uploaded_file）时，旧照片将被替换。

有没有更简单的方法可以让这个照片系统正常工作？

标签： phpjqueryhtmlmysql

解决方案

在执行之前，move_uploaded_file()您必须检查文件是否存在。如果是这样，您将需要创建一个新的文件名。您必须执行这些步骤，直到找到不存在的文件。

while ( TRUE ) { // Loop until we find a non-existent destination filename
    $nameFile = "picture" . $position;

    $patchImage = "/pictures/produtos/$productCategory/MTA$id/$nameFile.png";

    if ( ! file_exists( $patchImage ) ) { // We're good
        move_uploaded_file($file, "../../.." . $patchImage);
        saveImageInDataBase($id, $patchImage, $position);
        break; // Get out of the loop
    }

    $position++; // Try next position
}

推荐阅读