i want a script similar to the one in "imgbb," but with the image files hosted elsewhere.
หากคุณต้องการระบบอัปโหลดและแชร์รูปภาพที่มีหน้าตาและฟังก์ชันการใช้งานคล้ายกับ ImgBB (เช่น มีหน้าจอให้ลากวางไฟล์ กดอัปโหลด แล้วแสดงลิงก์สำหรับนำไปใช้งานต่อทันที) แต่ต้องการเปลี่ยนไปเก็บไฟล์ไว้ที่ระบบคลาวด์หรือเซิร์ฟเวอร์อื่น ๆ คุณสามารถเลือกใช้แนวทางแบบสำเร็จรูปหรือเขียนระบบขึ้นมาเองได้ ดังนี้ครับ:1. ใช้สคริปต์สำเร็จรูป (Chevereto)สคริปต์ที่เว็บไซต์ ImgBB และเว็บฝากรูปชื่อดังส่วนใหญ่เลือกใช้เป็นพื้นฐานคือ Chevereto ซึ่งเป็นซอฟต์แวร์ระบบจัดการรูปภาพที่สมบูรณ์แบบที่สุดการเก็บไฟล์: สามารถตั้งค่าให้ระบบส่งไฟล์ไปเก็บไว้ภายนอกเซิร์ฟเวอร์หลักได้ผ่านโปรโตคอลมาตรฐาน เช่น Amazon S3, Google Cloud Storage, DigitalOcean Spaces หรือโปรโตคอล FTP/SFTP ไปยังเซิร์ฟเวอร์เครื่องอื่นตัวเลือก: มีทั้งเวอร์ชันฟรี (Open Source บน GitHub) และเวอร์ชันเสียเงินที่มีฟังก์ชันครบถ้วน2. เขียนระบบขึ้นมาเอง (Custom Script)หากคุณต้องการระบบขนาดเล็กที่มีเพียงหน้าบ้าน (Frontend) ไว้รับไฟล์ แล้วส่งไปเก็บยังคลาวด์โฮสติ้งค่ายอื่นโดยตรง คุณสามารถพัฒนาต่อยอดจากโค้ดตัวอย่างนี้ได้ครับ:หน้าบ้าน: HTML & JavaScript (ดึงไลบรารี Dropzone.js มารับไฟล์)ตัวอย่างนี้ใช้ Dropzone.js เพื่อสร้างพื้นที่ลากวางไฟล์ที่ดูทันสมัยเหมือน ImgBBhtml<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ระบบอัปโหลดรูปภาพ</title>
<!-- โหลด Dropzone CSS -->
<link rel="stylesheet" href="
https://cloudflare.com">
<style>
body { font-family: sans-serif; background: #f4f6f9; padding: 40px; }
.upload-container { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.dropzone { border: 2px dashed #007bff; border-radius: 5px; background: #f8fafc; }
#result-links { margin-top: 20px; display: none; }
input[type="text"] { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
</style>
</head>
<body>
<div class="upload-container">
<h2>อัปโหลดรูปภาพของคุณ</h2>
<!-- ฟอร์ม Dropzone ชี้ไปยังสคริปต์หลังบ้าน -->
<form action="upload.php" class="dropzone" id="imageUploader"></form>
<div id="result-links">
<h3>ลิงก์สำหรับใช้งาน:</h3>
<label>URL ตรง:</label>
<input type="text" id="direct-link" readonly onclick="this.select()">
</div>
</div>
<!-- โหลด Dropzone JS -->
<script src="
https://cloudflare.com"></script>
<script>
Dropzone.options.imageUploader = {
paramName: "image",
maxFilesize: 5, // จำกัดขนาด 5MB
acceptedFiles: "image/*",
init: function() {
this.on("success", function(file, response) {
// เมื่อหลังบ้านอัปโหลดสำเร็จและส่ง URL กลับมา
const res = JSON.parse(response);
if(res.success) {
document.getElementById("direct-link").value = res.url;
document.getElementById("result-links").style.display = "block";
} else {
alert("เกิดข้อผิดพลาด: " + res.message);
}
});
}
};
</script>
</body>
</html>
ใช้โค้ดอย่างระมัดระวังหลังบ้าน: PHP (ส่งรูปไปเก็บไว้ที่อื่น เช่น Cloudinary หรือ Amazon S3)ในส่วนของหลังบ้าน (upload.php) คุณสามารถเขียนสคริปต์เพื่อรับไฟล์ภาพ แล้วใช้ SDK ส่งต่อไปยังผู้ให้บริการฝากรูปค่ายอื่น ๆ เช่น Cloudinary (มี API ให้ใช้ฟรีและจัดการภาพได้ดีมาก) หรือคลาวด์อื่น ๆ:php<?php
// ตัวอย่างโครงสร้างการรับไฟล์ใน upload.php เพื่อส่งต่อไปยังโฮสต์อื่น
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image'])) {
$file = $_FILES['image'];
// ตรงนี้คือจุดที่คุณจะเชื่อมต่อ API ของโฮสติ้งปลายทาง เช่น Cloudinary หรือ AWS S3
// ตัวอย่างสมมุติการส่งคำขอไปยัง API ปลายทาง:
/*
$targetUrl = "
https://api.โฮสต์อื่://xn--q3c.com";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $targetUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, [
'file' => new CURLFile($file['tmp_name'], $file['type'], $file['name']),
'api_key' => 'YOUR_API_KEY'
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$resultData = json_decode($response, true);
*/
// สมมุติว่าส่งไปโฮสต์อื่นสำเร็จ และได้ URL กลับมา
$uploadedUrl = "
https://your-external-storage.com" . time() . "_" . basename($file['name']);
echo json_encode([
'success' => true,
'url' => $uploadedUrl
]);
exit;
}
echo json_encode(['success' => false, 'message' => 'ไม่มีไฟล์ถูกส่งมา']);
ใช้โค้ดอย่างระมัดระวังแนะนำบริการโฮสติ้งภายนอกที่นิยมใช้แทน ImgBBCloudinary: มีการจัดการรูปภาพที่ฉลาด ย่อขนาดอัตโนมัติ และมี API เชื่อมต่อง่ายBackblaze B2 / DigitalOcean Spaces: ราคาประหยัดมาก เหมาะสำหรับระบบที่ต้องการเก็บรูปภาพปริมาณมหาศาล รองรับ S3-Compatible APIคุณมี ผู้ให้บริการปลายทาง (Cloud/Storage) ที่เล็งไว้ในใจแล้วหรือยังครับ? หรืออยากให้ผมลงลึกเกี่ยวกับ วิธีการเชื่อมต่อ API ของค่ายไหนเป็นพิเศษ (เช่น AWS S3, Cloudinary หรือ Imgur) เพื่อเขียนโค้ดหลังบ้านให้สมบูรณ์ขึ้น สามารถแจ้งได้เลยครับ
