DropzoneJS向PHP传递数据：新手技术求助（附部分表单代码）

Hey there! Since you're new to DropzoneJS, let's walk through exactly how to send that hidden category dropdown value along with your uploaded files to your upload.php script. There are two reliable ways to do this, and I'll break both down for you.

Method 1: Use Dropzone's params Configuration #

This is the simplest approach if you just need to pass a few static or easily retrievable values. You can define extra parameters directly in your Dropzone setup, which will be sent alongside the file data.

JavaScript Code #

// Wait for the page to fully load before initializing Dropzone
document.addEventListener('DOMContentLoaded', function() {
  // Configure your Dropzone instance
  Dropzone.options.myDropzone = {
    paramName: "file", // The name PHP will use to access the file (matches $_FILES['file'])
    maxFilesize: 5, // Adjust file size limit (in MB) as needed
    addRemoveLinks: true, // Show remove links for uploaded files
    // Define extra parameters to send to PHP
    params: {
      category: function() {
        // Grab the selected value from your hidden dropdown
        return document.getElementById('category').value;
      }
    },
    // Optional: Handle success/error responses
    success: function(file, response) {
      console.log("Upload successful!", JSON.parse(response));
    },
    error: function(file, errorMsg) {
      console.error("Upload failed:", errorMsg);
    }
  };
});

Method 2: Use the sending Event (More Flexible) #

If you need to dynamically add data right before the file is sent (e.g., if you have multiple fields or need to fetch values at upload time), use Dropzone's sending event to append data to the form payload.

JavaScript Code #

document.addEventListener('DOMContentLoaded', function() {
  Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 5,
    addRemoveLinks: true,
    // Listen for the "sending" event to add extra data
    sending: function(file, xhr, formData) {
      // Append the category value to the form data
      formData.append('category', document.getElementById('category').value);
      // You can add more fields here too! For example:
      // formData.append('user_id', 123);
    }
  };
});

Receiving Data in upload.php #

Now, in your PHP script, you can access both the uploaded file and the category value using the superglobal $_FILES and $_POST arrays:

<?php
// Check if a file was uploaded
if (!empty($_FILES['file'])) {
    // Get file details
    $uploadedFile = $_FILES['file'];
    $fileName = basename($uploadedFile['name']);
    $fileTmpPath = $uploadedFile['tmp_name'];
    $fileError = $uploadedFile['error'];
    
    // Get the category value from POST data
    $selectedCategory = isset($_POST['category']) ? $_POST['category'] : 'No category selected';
    
    // Process the file (example: move it to an uploads directory)
    $uploadDir = 'uploads/';
    // Create the uploads directory if it doesn't exist
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }
    
    $destinationPath = $uploadDir . $fileName;
    if ($fileError === UPLOAD_ERR_OK && move_uploaded_file($fileTmpPath, $destinationPath)) {
        // Success: Return a JSON response (optional but helpful for JS)
        echo json_encode([
            'status' => 'success',
            'message' => 'File uploaded successfully',
            'category' => $selectedCategory,
            'file_path' => $destinationPath
        ]);
    } else {
        // Error handling
        $errorMsg = $fileError !== UPLOAD_ERR_OK ? "File error code: $fileError" : "Failed to move uploaded file";
        echo json_encode(['status' => 'error', 'message' => $errorMsg]);
    }
} else {
    echo json_encode(['status' => 'error', 'message' => 'No file was uploaded']);
}
?>

Important Notes #

• Make sure users can select a category: Your dropdown is set to display: none right now—you'll want to make it visible (or use a different UI like a modal/button) so users can choose a category before uploading. If you need to keep it hidden but pre-selected, ensure the value is set correctly via JS or server-side.
• Manual upload trigger (optional): If you want users to select a category first before uploading files, set autoProcessQueue: false in your Dropzone config, then add a button to trigger the upload:

  // Add this to your Dropzone config
  autoProcessQueue: false,
  
  // Then add a button click handler
  document.getElementById('upload-btn').addEventListener('click', function() {
      const myDropzone = Dropzone.forElement('#myDropzone');
      myDropzone.processQueue();
  });
  

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