如何无表单实现从文件输入框上传图片至photos文件夹？

Hey there! Let's get your formless image upload working properly, saving to that photos folder. I'll walk you through completing the frontend JavaScript and show you two common backend implementations to handle the file storage.

1. Complete Frontend Code (HTML + JavaScript) #

First, here's your existing HTML with the full JavaScript logic to handle the upload via AJAX:

HTML #

<input type="file" name="inputFile" id="inputFile" accept="image/jpeg, image/png">
<span>Scegli una foto</span>
<input id="Invia" type="button" value="Invia">

JavaScript (jQuery) #

$("#Invia").click(function() {
  // Grab the selected file from the input
  const selectedFile = $("#inputFile")[0].files[0];
  
  // Validate a file was selected first
  if (!selectedFile) {
    alert("Per favore seleziona una foto prima!");
    return;
  }

  // Create FormData object (critical for file uploads)
  const myFormData = new FormData();
  // Append the file with a clear key name (backend will use this to fetch the file)
  myFormData.append('uploadedImage', selectedFile);

  // Send the AJAX request
  $.ajax({
    url: '/upload-photo', // Replace with your backend endpoint URL
    type: 'POST',
    data: myFormData,
    // These two settings are REQUIRED for FormData uploads
    processData: false, // Prevents jQuery from converting FormData to a string
    contentType: false, // Lets the browser set the correct multipart/form-data header
    success: function(response) {
      alert("Foto caricata con successo!");
      console.log("Server response:", response);
      // Reset the file input for next uploads
      $("#inputFile").val('');
    },
    error: function(xhr, status, error) {
      alert("Errore durante il caricamento: " + error);
      console.error("Upload failed:", xhr, status, error);
    }
  });
});

2. Backend Implementation Examples #

You'll need a backend to receive the file and save it to the photos folder. Here are two popular options:

Option A: Node.js + Express (with Multer) #

Multer is the go-to middleware for handling file uploads in Express. First install it:

npm install multer express

Then create your server code:

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// Configure Multer to save files to the "photos" folder
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // Ensure the "photos" folder exists first!
    cb(null, './photos');
  },
  filename: (req, file, cb) => {
    // Generate a unique filename to avoid overwriting existing files
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`);
  }
});

// Filter to only accept JPEG/PNG images (mirrors frontend validation)
const fileFilter = (req, file, cb) => {
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Solo immagini JPEG o PNG sono accettate!'), false);
  }
};

const upload = multer({ 
  storage: storage, 
  fileFilter: fileFilter,
  limits: { fileSize: 5 * 1024 * 1024 } // Optional: Limit file size to 5MB
});

// Endpoint to handle uploads
app.post('/upload-photo', upload.single('uploadedImage'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('Nessun file caricato o formato non valido');
  }
  res.status(200).json({
    message: 'File caricato con successo',
    filename: req.file.filename,
    savedPath: req.file.path
  });
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Option B: PHP #

If you're using PHP, save this as upload-photo.php and update your frontend AJAX url to point to this file:

<?php
// Define allowed file types and target folder
$allowedMimeTypes = ['image/jpeg', 'image/png'];
$targetFolder = './photos/';

// Create target folder if it doesn't exist
if (!file_exists($targetFolder)) {
    mkdir($targetFolder, 0755, true);
}

// Get the uploaded file data
$uploadedFile = $_FILES['uploadedImage'];

// Check for upload errors
if ($uploadedFile['error'] !== UPLOAD_ERR_OK) {
    http_response_code(400);
    echo "Errore nel caricamento: codice errore " . $uploadedFile['error'];
    exit;
}

// Validate file type
if (!in_array($uploadedFile['type'], $allowedMimeTypes)) {
    http_response_code(400);
    echo "Solo immagini JPEG o PNG sono accettate!";
    exit;
}

// Generate unique filename to prevent overwrites
$uniqueFileName = uniqid() . '-' . basename($uploadedFile['name']);
$targetPath = $targetFolder . $uniqueFileName;

// Move the temporary file to the target folder
if (move_uploaded_file($uploadedFile['tmp_name'], $targetPath)) {
    http_response_code(200);
    echo json_encode([
        'message' => 'Foto caricata con successo',
        'filename' => $uniqueFileName,
        'savedPath' => $targetPath
    ]);
} else {
    http_response_code(500);
    echo "Errore durante il salvataggio del file";
}
?>

Key Notes to Remember #

• Folder Permissions: Make sure the photos folder has write permissions (for Node.js, the server process needs access; for PHP, set folder permissions to 755 or 777 depending on your server config).
• Consistent Key Names: The FormData key (uploadedImage) must match what your backend uses to fetch the file (e.g., upload.single('uploadedImage') in Express, $_FILES['uploadedImage'] in PHP).
• Server-Side Validation: Never rely solely on frontend validation! Always check file type and size on the backend to block malicious files.

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