หมวดไฟฟ้า/อิเล็กทรอนิกส์/คอมพิวเตอร์ => ห้องคอมพิวเตอร์ => Programming => ข้อความที่เริ่มโดย: Prog Man ที่ 11 กรกฎาคม 2569, 11:42:33
-
[smf] แต่งธีม ตอน เพิ่มปุ่มใส่ภาพแต่เก็บไฟล์ไว้ที่ upic.me
มาว่าถึงเรื่องการปรับแต่งบอร์ดเล็กๆน้อยๆ แต่จะทำให้บอร์ดของเรามีประสิทธิภาพยิ่งใหญ่ได้อีกเรื่องหนึ่ง
นั่นคือ การโพสต์ภาพ
ประสิทธิภาพของบอร์ด smf เกี่ยวกับการโพสต์ภาพนั้นอย่างที่เราเห็นๆ มีสองอย่างคือ เอาภาพมากจากเว็บอื่นโดยใช้ใช้ bbc โค๊ดมาคร่อม [img]http://xxxx[img]
อีกวิธีหนึ่งคือการแนบไฟล์ อย่างที่ผมเคยได้เขียนไว้แล้ว http://nevikup.blogspot.com/2011/07/smf_26.html
แต่ปัญหาของการแนบไฟล์คือถ้ามีการแนบบ่อยๆ ท้ายที่สุดโฮสท์ของเราก็จะหนักอึ้งด้วยปริมาณภาพมหาศาล ไม่นับแบนวิธที่เสียไปกับการถูกดึงภาพไปใช้ตามเว็บต่างๆอีกด้วยแนะ
วันนี้เลยมีอีกหนึ่งวิธีเกี่ยวกับการโพสต์ภาพ ในบอร์ด แต่ไม่ต้องเก็บไว้ในโฮสท์ของเรา หลายคนรู้จักเว็บสำหรับฝากไฟล์ซึ่งมีมากมายไม่ว่าจะเป็น flickr.com ,picasa.google.com, uploadtoday.com ฯลฯ
แต่ที่ผมจะแนะนำในบทความนี้คือเว็บฝากไฟล์ที่ชื่อว่า upic.me
upic.me เขามีดีอะไร?
ผมก็ไม่แน่ใจว่าเขามีดีอะไรที่ต่างจากเว็บฝากไฟล์อื่นๆนะครับ แต่ที่แน่ๆคือเราสามารถสร้างปุ่มสำหรับเลือกไฟล์จากเครื่องเรา แต่เก็บไฟล์ไว้ที่ upic.me และดึงมาแสดงในบอร์ดได้ !!!
เจ๋งมั้ยละครับ
และที่เจ๋งไปกว่านั้นครับ มันยังสามารถเลือกอัพไฟล์พร้อมกันหลายๆไฟล์ได้ บร๊ะเจ้า!!
พูดไป ไม่เห็นภาพ เดี๋ยวมาดูการปรับแต่งกันดีกว่าว่าทำไง?
ขบวนการนี้มีไฟล์ที่เกี่ยวข้องแค่ตัวเดียวครับ คือไฟล์ Themes/default/Post.template.php เปิดมันขึ้นมาครับ และก่อนอื่นใด Save as.. ไปไว้ที่โฟล์เดอร์ของธีมของเราก่อน (ถ้าในธีมของเรามีแล้ว ก็เปิดมันขึ้นมาโดยไม่ต้องไปเปิดจากโฟล์เดอร์ default/นะครับ)
ไปที่บรรทัดที่ 647 ถ้าในบรรทัดดังกล่าวเจอคำสั่ง <td colspan="2"></td> แสดงว่ามาถูกทางแล้ว แต่หากไม่ใช่คำสั่งนี้ ลองมองหาในบรรทัดถัดไปขึ้นบนหรือลงล่างดูในแถวนี้แหละครับ หาแท็กนี้ให้เจอ เสร็จแล้วแปะโค๊ดนี้ลงไปตรงกลางระหว่าง <td colspan="2"> และ </td>
โค๊ดที่ว่านี้คือ โค๊ดนี้ครับ
<script type="text/javascript" src="http://upic.me/js/embedupload.js"></script>
<script type="text/javascript">
upic_target = document.postmodify.message;
upic_type = "bbfull";
upic_buttoncss += "color:#000000;";
</script>
<style type="text/css">
#upic_uploader{}
#upic_uploadprogress{}
.progressWrapper{margin-top:5px;}
.progressContainer{border-bottom:1px dotted #ddd;padding:2px;}
.progressName{text-align:left;color:black;margin-left:2px;float:left;}
.progressBarStatus{color:#666;text-align:right;margin:1px 1px 0 0;font-size:9px;}
.red{border:solid 1px #B50000;background-color:#FFEBEB;}
.green{border:solid 1px #DDF0DD;background-color:#EBFFEB;}
.blue{border:solid 1px #CEE2F2;background-color:#F0F5FF;}
.progressBarInProgress,.progressBarComplete,.progressBarError{clear:both;font-size:0;width:0%;height:2px;background-color:blue;margin-top:4px;}
.progressBarComplete{width:100%;background-color:green;visibility:hidden;}
.progressBarError{width:100%;background-color:red;visibility:hidden;}
</style>
ไฟล์ css นี้เราสามารถตกแต่งให้งดงามกว่านี้ได้ครับ อยู่ที่ท่านแล้วละ
มีจุดหนึ่งที่อยากให้ดูครับ ตรงที่เป็นสีน้ำเงิน ตรงนี้เราสามารถกำหนดให้ภาพที่โพสต์มานั้นเป็นแบบไหน มีให้เลือก htmlfull / htmlthumb / bbfull / bbthumb
htmlfull คือ ภาพที่โพสต์ลงในบอร์ดจะเป็นคำสั่ง html แบบนี้ <img src="ภาพ"/> ขนาดภาพเท่าขนาดจริง
htmlthumb จะคล้ายกับ htmlfull แต่ขนาดภาพที่โพสต์ลงจะเป็นภาพเล็ก สองวิธีนี้ใช้ไม่ได้ในบอร์ด smf เพราะบอร์ด smf ใช้คำสั่งbbc
bbfull และ bbthumb เหมาะกับบอร์ดsmf แนะนำให้เลือกใช้ 2 ตัวนี้ bbfull ภาพที่โพสต์ลงจะมีขนาดเท่าภาพจริง ส่วน bbthumb จะเป็นภาพเล็ก
เมื่อแก้ไขเสร็จแล้วก็เซฟ ทีนี้ลองไปตั้งกระทู้ดูครับ ใต้คำว่าตั้งกระทู้ใหม่ จะมีคำว่า Select images ลองเลือกดู
https://nevikup.blogspot.com/2011/07/
-
อีกเว็บ แต่ยังไม่เจ๋งเหมือน Uppic.me
สร้างระบบอัพโหลดรูปภาพด้วย JavaScript
https://www.mindphp.com/developer/20-javascript/10115-create-image-uploader-with-javascript.html
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(https://postimages.org/)
-
-Simple Image Upload v2.0.0
https://custom.simplemachines.org/index.php?mod=1669
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(https://custom.simplemachines.org/index.php?mod=1669)
-
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(https://imgbb.com/mod)
-
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) เพื่อเขียนโค้ดหลังบ้านให้สมบูรณ์ขึ้น สามารถแจ้งได้เลยครับ
-
อยากฝากไฟล์แบบมือโปร เสียเงินตามนี้
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
(https://chevereto.com/pricing)