技术需求：点击图片链接后在服务器TXT文件记录带链接格式的图片URL

Got it, let's walk through how to build this feature: when someone clicks an image link to view the full image, we'll automatically log that image's URL to a specified text file on your server. Here's a complete, actionable solution:

First, we'll create the image link that opens the full image in a new tab and triggers a background request to log the URL. Use this HTML/JS snippet:

<!-- Replace with your actual image URLs -->
<a href="https://your-domain.com/full-image.jpg" target="_blank" onclick="logImageClick('https://your-domain.com/full-image.jpg')">
  <img src="https://your-domain.com/thumbnail-image.jpg" alt="Descriptive image alt text">
</a>

<script>
function logImageClick(imageUrl) {
  // Send a POST request to our backend logging endpoint
  fetch('/log-image.php', { // Update this path to match your backend file location
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `imageUrl=${encodeURIComponent(imageUrl)}`
  })
  .then(response => response.text())
  .then(data => console.log('URL logged:', data)) // Optional: Log success to console
  .catch(error => console.error('Logging failed:', error)); // Optional: Log errors to console
}
</script>

Next, we need a server-side script to handle the logging request. Below are examples for two common server environments:

PHP Example (Most Shared Hosting) #

Create a file named log-image.php on your server with this code:

<?php
// Replace this path with the FULL server path to your target text file
// Example: /home/your-username/public_html/image-clicks.txt
$logFilePath = '/path/to/your/image-clicks.txt';

// Validate the request
if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['imageUrl'])) {
  http_response_code(400);
  echo "Invalid request";
  exit;
}

$imageUrl = urldecode($_POST['imageUrl']);
// Optional: Add validation to ensure it's a valid URL
if (!filter_var($imageUrl, FILTER_VALIDATE_URL)) {
  http_response_code(400);
  echo "Invalid URL";
  exit;
}

// Append the URL to the text file (with a newline for readability)
$logEntry = $imageUrl . PHP_EOL;

// Use LOCK_EX to prevent race conditions if multiple users click at the same time
if (file_put_contents($logFilePath, $logEntry, FILE_APPEND | LOCK_EX)) {
  echo "Success";
} else {
  http_response_code(500);
  echo "Failed to write to log file";
}
?>

Node.js + Express Example #

If you're using a Node.js server, create a server.js file with this code (make sure you have Express installed via npm install express):

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

// Parse URL-encoded bodies (for form data)
app.use(express.urlencoded({ extended: true }));

// Define the path to your log file
const logFilePath = path.join(__dirname, 'image-clicks.txt');

// Endpoint to handle logging requests
app.post('/log-image', (req, res) => {
  const { imageUrl } = req.body;

  // Validate the URL
  const urlPattern = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w.-]*)*\/?$/;
  if (!imageUrl || !urlPattern.test(imageUrl)) {
    return res.status(400).send("Invalid or missing URL");
  }

  const logEntry = `${imageUrl}\n`;

  // Append to the log file
  fs.appendFile(logFilePath, logEntry, { flag: 'a' }, (err) => {
    if (err) {
      console.error("Error writing to log:", err);
      return res.status(500).send("Logging failed");
    }
    res.send("Success");
  });
});

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

• File Permissions: Ensure your server has write access to the target text file and its parent directory. On Linux servers, you can adjust permissions with chmod 664 image-clicks.txt (read/write for owner/group, read for others).
• Clearing the Log: To empty the text file, you can manually edit it via FTP/SSH, or create a secured admin endpoint (add authentication!) that overwrites the file with an empty string.
• Security: Always validate incoming data (like we did with URL checks) to prevent malicious input from being written to your server.

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