使用Ajax拖放在服务器上命名文件

我们能够深入了解聊天中的内容，下面是一个建议的解决方案：

图像的顺序存储在JSON文件中。然后，当我们想获取图库包含的图像列表时，将读取该文件，并在添加新图像以及用户对这些图像进行排序时进行更新。

为了做到这一点，我制作了一个仅包含实用程序功能和演示页面的文件：

utils.php

<?php 

/**
 * Returns the path to a gallery's directory
 */
function getClientGalleryDirPath($clientId, $gallery) {
  return 'images/upload/' . $clientId . '/photos/' . $gallery;
}

/**
 * Returns the path to a gallery's data file
 */
function getClientGalleryDataPath($clientId, $gallery) {
  return getClientGalleryDirPath($clientId, $gallery) . '/data.json';
}

/**
 * Makes sure the client's gallery has a directory, and a JSON file
 * containing the list of images
 */
function ensureClientGalleryExists($clientId, $gallery) {
  $dirPath = getClientGalleryDirPath($clientId, $gallery);

  if(!file_exists($dirPath)) {
    mkdir($dirPath, 0755, true);
  }

  $jsonPath = getClientGalleryDataPath($clientId, $gallery);

  if (!file_exists($jsonPath)) {
    // Create an empty Array
    $data = [];

    // If pictures exist, we'll add them
    $pictureFiles = scandir($dirPath);
    foreach($pictureFiles as $pic) {
      if(!empty($pic) && $pic != '.' && $pic != '..') {
          array_push($data, $pic);
      }
    }
    // Make the Array a JSON string, and save it
    $json = json_encode($data);
    file_put_contents($jsonPath, $json);
  }
}

/**
 * Ensures the gallery is created, and returns the data
 */
function getOrCreateClientGallery($clientId, $gallery) {
  // Make sure it exists
  ensureClientGalleryExists($clientId, $gallery);

  $dataPath = getClientGalleryDataPath($clientId, $gallery);
  $json = file_get_contents($dataPath);

  return json_decode($json, true);
}

/**
 * Saves new data in a client's gallery
 */
function saveClientGallery($clientId, $gallery, $data) {
  // Make sure it exists
  ensureClientGalleryExists($clientId, $gallery);

  $dataPath = getClientGalleryDataPath($clientId, $gallery);
  $json = json_encode($data);

  return file_put_contents($dataPath, $json);
}

/**
 * Uploads pictures, and updates the gallery data
 */
function addPicturesToGallery($clientId, $gallery, $files) {
  // Get the existing data
  $data = getOrCreateClientGallery($clientId, $gallery);
  $dirPath = getClientGalleryDirPath($clientId, $gallery);

  foreach($files['tmp_name'] as $index => $tmpName) {
    if (
         !empty($tmpName) &&
         is_uploaded_file($tmpName) &&
         substr($files['type'][$index], 0, 5) == "image"
       ) {
         // Create a unique name, and move the file
         $newName = uniqid() . '.' . pathinfo($files['name'][$index], PATHINFO_EXTENSION);
         move_uploaded_file($tmpName, $dirPath . '/'. $newName);
         // Add the new name to $data 
         array_push($data, $newName);
    }
  }

  // We're done, save the data
  saveClientGallery($clientId, $gallery, $data);
}

/**
 * Compares the new list with the previous one, and updates it
 */
function  reorderClientGallery($clientId, $gallery, $newData) {
  $oldData = getOrCreateClientGallery($clientId, $gallery);

  // Make sure that every element is present in both Arrays
  // (otherwise there's something wrong with the provided data)
  if (
       count(array_diff($oldData, $newData)) == 0 &&
       count(array_diff($newData, $oldData)) == 0
     ) {
       saveClientGallery($clientId, $gallery, $newData);
  }
}

index.php

<?php 

require_once('utils.php');

// Just for the demo, let's say that:
$clientId = 'robert';
$gallery = 'my-first-gallery';

// If pictures were sent, upload them
if (isset($_FILES['images']) && $_FILES['images']['size'] > 0) {
  addPicturesToGallery($clientId, $gallery, $_FILES['images']);
}

// If a picture ordering was sent, apply it
if (isset($_POST['order'])) {
  reorderClientGallery($clientId, $gallery, json_decode($_POST['order']));
}



// To avoid cluttering the HTML below, I declared this here
function displayGalleryItems($clientId, $gallery) {
  $dirPath = getClientGalleryDirPath($clientId, $gallery);
  // Get the gallery and display it
  $data = getOrCreateClientGallery($clientId, $gallery);
  foreach($data as $pic) {
    echo '<div class="pic" data-pic="' . $pic . '" style="background-image: url(\'' . $dirPath . '/' . $pic . '\')"></div>';
  }
}

?><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My gallery</title>
  <style>
    #saveBtn { display: none; } /* will only be displayed after reordering */
    .pic { display: inline-block; width: 250px; height: 190px; background-size: cover; margin: .5em; }
  </style>
</head>
<body>
  <h1><?=$gallery?></h1>

  <p>Add pictures to your gallery:</p>
  <form method="post" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple>
    <input type="submit">
  </form>

  <div id="sortable">
    <?php displayGalleryItems($clientId, $gallery); ?>
  </div>

  <form method="post">
    <input type="hidden" name="order">
    <input type="submit" value="Enregistrer" id="saveBtn">
  </form>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $("#sortable").sortable({
      revert: 200,
      update: function() {
        // Every time the order changes, grab the filenames
        var order = $('.pic').map(function(i, p) { return $(p).attr('data-pic'); }).toArray();
        // Set the form input's value
        $('input[name="order"]').val( JSON.stringify(order) );
        // Show the save button
        $('#saveBtn').show();
      }
    });

    $(".pic").disableSelection();
  });
  </script>
</body>
</html>