Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

FCKeditor โมเพิ่มปุ่มลบรูป

หัวข้อ บทความ แทก HTML | JavaScript

บทความนี้ได้เขียนไว้นานกว่าปีแล้ว ปัจจุบันมี Script ที่สามารถจัดการเรื่อง File manager ให้กับ FCKeditor ได้ดีกว่า
ชื่อว่า CKFinder สามารถอ่านรายละเอียดได้ที่นี่ ครับ

CKFinder File Manager แบบ Ajax


บทความนี้ทำไว้สำหรับท่านที่ใช้ FCKeditor แล้วมีปัญหาว่า
รูปภาพที่ Upload ขึ้นไปนั้น ไม่สามารถลบทิ้งได้

คือ FCK ไม่มีปุ่มลบรูปให้นั้นแหล่ะ

คราวนี้เป็นหน้าที่ของเราที่ต้องทำเพิ่มเองครับ



อันดับแรกโมดิฟาย Source เดิม

ว่าแล้วไปที่ File

FCKeditor/editor/filemanager/browser/default/frmresourceslist.html

File นี้จะเป็น File ที่จัดการแสดงผล List File ต่างๆออกมา
โดยอาศัย Javascript ทำงานแบบ AJAX ดึง File ออกมาแสดงผล



หากพิจารณาตาม Code แล้ว

oCell.innerHTML = ' ' + fileSize + ' KB' ;

คือจุดที่เราจะโมดิฟายแน่ๆครับ

ผมจึงเปลี่ยนใหม่เป็นดังนี้

oCell.innerHTML = '&nbsp;' + fileSize + ' KB <a href="javascript:delfile(\''+fileUrl+'\');" onMouseover="stat_write(\'\');return true;" onMouseout="stat_write(\'\');return true;"><img src="images/icons/cut.gif" hspace="0" vspace="1" border="0" align="absmiddle" alt="ลบ File นี้ทิ้ง" ></a>';

คือเพิ่ม Link ให้คลิกเรียก Function delfile เข้าไปโดย สิ่งที่ส่งเข้าไปลบคือ
URL ของ File ตรงๆเลย

แน่นอนว่าเราต้องเขียน delfile ขึ้นมาใช้เองจากเดิมที่มันทำงานเป็น AJAX
ผมเลยโม Javascript ขึ้นมาใหม่เป็นแบบนี้

xmlhttp.js

function newXmlHttp(){
var xmlhttp = false;

try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}

if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function delfileajax(id){
// กำหนด Path File php ที่จะใช้ลบให้ถูกต้อง
var url = "../../../../../../diary/file_delete.php?id="+id;
xmlhttp = newXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
returntext = xmlhttp.responseText;

}

function delfile(id) {
if (window.confirm("คุณแน่ใจที่จะลบ File นี้ ?")) {
delfileajax(id);
window.parent.frames['frmResourcesList'].Refresh();
}
}

แล้วนำไปประกอบเข้า frmresourcelist.html เดิม

<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/xmlhttp.js"></script>

สรุปคือ frmresourcelist.html จะมี Function ลบ File เพิ่มขึ้นมา
โดยปุ่มที่ใช้ลบ จะเรียก function delfile ที่จะส่งค่า path เต็มของ File นั้นไปให้ลบ กับ Function
delfileajax ซึ่งจะทำงานผ่าน AJAX ส่งค่าเข้าไปลบ กับ PHP บน Server คือ file_delete.php นั้นเอง
โดยเมื่อลบ file เสร็จแล้ว Function delfile จะทำการเรียก Frame ให้ refresh หน้า list file อีกครั้ง
ก็จะทำให้เราเห็นว่า File ได้ถูกลบไปแล้ว

file_delete.php ผมไม่เขียนให้นะครับ :P ลองไปโมกันเอาเอง



ตัวอย่างหน้า List ที่ผมเพิ่มไอคอน ลบรูปเข้าไป



ข้อควรระวัง

1. การส่ง path ในรูปแบบดังกล่าว ไม่ปลอดภัยด้วยเหตุผลทั้งปวง
ฉะนั้น File file_delete.php คุณต้อง Check สิทธิ การใช้งานให้ดีๆ (หากเชื่อใจ user ก็ไม่ว่ากัน)

2. เช็ค id ที่ส่งมาให้ดีๆ อีกครั้ง เพราะถ้า user เล่นตลกส่ง id ประหลาดๆ
เพื่อแอบลบหน้าหลักของ web ของคุณก็มีโอกาสเป็นไปได้

3. อ่านทวนอีกครั้งก่อนลงมือปฎิบัติ

จบข่าว มีอะไรถามได้นะเคอะ
เล่นสั้นๆเวลามีน้อย งานเยอะคร๊าบ ^^

รูปคุณ Read (12,520) Comments (8) 2006-04-18 23:24:29

ความคิดเห็น

Code delete เขียนยังงัยครับผม

รูปคุณ BB โดยคุณ BB 2007-05-28 14:22:34

"ขอบคุณมากเลยครับสำหรับบทความนี้" และยังมี "comment ข้อควรระวัง" ไว้ให้ด้วย เพราะต้องเช็ค ID และ User ด้วย ยิ่ง user นี่ก็สำคัญครับถ้าหากรู้ path ของไฟล์ frmresourceslist.html ก็สามารถเข้ามาจัดการไฟล์ได้เลย ดังนั้นจะต้องเพิ่มโค้ดเพื่อดัก Permission ตรงส่วน frmresourceslist.html และ file_delete.php นี้ด้วย

ขอบคุณอีกครั้งครับ.(^ o ^)

รูปคุณ TaTump โดยคุณ TaTump 2007-08-15 15:52:50


หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก

www.memo8.com | www.gump.in.th

 

เอามาแบ่งปันกันค่ะ

http://www.bram.us/2006/10/18/my-tinymce-file-management-part-2-tinyfck-with-delete-option/

ลองทำตามแล้ว work เลยเอามาแบ่งกันดูค่ะ

รูปคุณ phenchi โดยคุณ phenchi 2007-10-01 00:49:39

ขอบคุณครับ อิอิ

รูปคุณ Nu โดยคุณ Nu 2009-05-27 16:43:28

ช่วยแก้การ Upload อ่านภาษาไทยไม่ได้ให้ทีครับ

รูปคุณ ta โดยคุณ ta 2010-01-25 16:28:18

ขอความอนุเคราะห์แนะนำวิธีลบไฟล์ภาพที่ upload ขึ้นไปบนเซอร์ฟเวอร์
เหมือนตัวอย่างข้างบนนี้

รูปคุณ ครู...บูรพา โดยคุณ ครู...บูรพา 2010-04-20 13:42:27

รูปคุณ dds โดยคุณ dds 2010-10-03 04:16:22

ไม่เข้าใจว่า เราจะไปที่ FCKeditor/editor/filemanager/browser/default/frmresourceslist.html ยังไง

รูปคุณ ning โดยคุณ ning 2014-03-27 16:28:12

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

Internet MySQL Music CSS Downloads Developer Gallery ASP Diary Plugin PHP Search Engine Testdrive Honda Firefox AIS HTML Clip Video barcampbkk2 Web2.0 SMS Perl Ajax Software Motorcycle FTR ล้อหมอบ MSN Live Google Security

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.0301 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout