如何实现已添加图片的重排序及多图拖拽上传？

Hey there! Let's get those two image upload features sorted out for you. Since you're not super comfortable with jQuery/JavaScript, I'll break this down with clear, modified code that adds both drag-and-drop reordering and batch drag-and-drop uploads—no confusing jargon, promise.

Key Tools We'll Use #

• jQuery UI Sortable: For easy, intuitive drag-and-drop reordering of preview images
• Native HTML5 Drag & Drop API: To handle batch file uploads when users drag files directly into the UI

Step 1: Updated HTML Structure #

First, we'll tweak the HTML to add a dedicated drop zone for batch uploads and a sortable preview container. We'll also include jQuery and jQuery UI (required for the sortable feature):

<!-- Add these resources in your <head> section -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<form action="" method="post" enctype="multipart/form-data">
  <!-- Batch drag-and-drop zone -->
  <div id="drop-zone" style="border: 2px dashed #ccc; padding: 25px; text-align: center; margin-bottom: 15px;">
    Drag image files here to upload, or click "Add More Files" below
  </div>

  <!-- Hidden file input for manual selection -->
  <div id="filediv" style="display: none;">
    <input type="file" id="file" name="file[]" multiple />
  </div>

  <!-- Sortable container for image previews -->
  <div id="preview-container" class="sortable" style="display: flex; flex-wrap: wrap; gap: 12px; margin: 15px 0;"></div>

  <br />
  <input type="button" id="add_more" class="uploading" value="Add More Files"/>
  <input type="submit" value="Upload File" name="upload" class="uploading"/>
</form>

Step 2: Modified JavaScript Code #

This code replaces your existing script and adds both requested features, with comments explaining each key part:

var previewCount = 0;
$(document).ready(function() {
  // 1. Initialize drag-and-drop reordering for previews
  $("#preview-container").sortable({
    cursor: "move",
    placeholder: "ui-state-highlight", // Visual feedback during dragging
    handle: ".preview-img" // Only allow dragging by clicking the image itself
  });
  $("#preview-container").disableSelection();

  // 2. "Add More Files" button functionality
  $('#add_more').click(function() {
    $('#file').click(); // Trigger hidden file input
  });

  // 3. Handle manual file selection (supports multiple files)
  $('body').on('change', '#file', function() {
    if (this.files && this.files.length > 0) {
      // Loop through all selected files
      $.each(this.files, function(index, file) {
        if (file.type.match('image.*')) { // Only process image files
          createImagePreview(file);
        } else {
          alert(`${file.name} isn't an image file—please select images only.`);
        }
      });
      $(this).val(''); // Reset input so users can re-select the same files
    }
  });

  // 4. Batch drag-and-drop upload setup
  const dropZone = $('#drop-zone');
  // Prevent default browser drag behaviors
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.on(eventName, preventDefaults);
    $('body').on(eventName, preventDefaults);
  });
  // Highlight drop zone when files are dragged over
  ['dragenter', 'dragover'].forEach(eventName => {
    dropZone.on(eventName, () => dropZone.addClass('highlight'));
  });
  ['dragleave', 'drop'].forEach(eventName => {
    dropZone.on(eventName, () => dropZone.removeClass('highlight'));
  });
  // Handle dropped files
  dropZone.on('drop', handleDrop);

  // 5. Upload button validation
  $('#upload').click(function(e) {
    const fileCount = $('.file-input-hidden').length;
    if (fileCount === 0) {
      alert("Please select at least one image first!");
      e.preventDefault();
    } else {
      // Reorder hidden file inputs to match preview order for backend
      $('#preview-container .abcd').each(function() {
        $('#filediv').append($(this).find('.file-input-hidden'));
      });
    }
  });

  // Helper: Create image preview and hidden file input
  function createImagePreview(file) {
    previewCount += 1;
    const previewId = `abcd${previewCount}`;
    const previewImgId = `previewimg${previewCount}`;

    // Build preview HTML
    const previewHtml = `
      <div id="${previewId}" class="abcd" style="position: relative;">
        <img id="${previewImgId}" class="preview-img" src="" style="width: 150px; height: 150px; object-fit: cover; border: 1px solid #ddd;"/>
        <img class="delete-btn" src="x.png" alt="Delete" style="position: absolute; top: 5px; right: 5px; cursor: pointer; width: 22px; height: 22px; background: white; border-radius: 50%; padding: 2px;"/>
        <!-- Hidden input to submit the file with the form -->
        <input type="file" name="file[]" class="file-input-hidden" style="display: none;" />
      </div>
    `;
    $('#preview-container').append(previewHtml);

    // Load and display the image preview
    const reader = new FileReader();
    reader.onload = function(e) {
      $(`#${previewImgId}`).attr('src', e.target.result);
    };
    reader.readAsDataURL(file);

    // Attach the file to the hidden input
    const hiddenInput = $(`#${previewId}`).find('.file-input-hidden');
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    hiddenInput[0].files = dataTransfer.files;

    // Delete button functionality
    $(`#${previewId}`).find('.delete-btn').click(function() {
      $(this).parent().remove();
    });
  }

  // Drag-and-drop helper functions
  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }
  function handleDrop(e) {
    const files = e.originalEvent.dataTransfer.files;
    if (files.length > 0) {
      $.each(files, function(index, file) {
        if (file.type.match('image.*')) {
          createImagePreview(file);
        } else {
          alert(`${file.name} isn't an image file—please drag images only.`);
        }
      });
    }
  }
});

Optional Styling for Better UX #

Add this CSS to make the UI feel more polished:

#drop-zone.highlight {
  border-color: #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
}
.ui-state-highlight {
  width: 150px;
  height: 150px;
  border: 2px dashed #2196F3;
}
.abcd:hover .delete-btn {
  opacity: 0.8;
}
.abcd .delete-btn {
  opacity: 0.5;
  transition: opacity 0.2s;
}

内容的提问来源于stack exchange，提问作者CleanQuery