เปลี่ยนการอัพโหลดไฟล์ให้ดูดีสวย ๆ ด้วย uploadify ตอนที่ 4 (ปรับแต่งปุ่มอัพโหลด)

หน้าแรก PHP MySQL เกร็ดความรู้ เปลี่ยนการอัพโหลดไฟล์ให้ดูดีสวย ๆ ด้วย uploadify ตอนที่ 4 (ปรับแต่งปุ่มอัพโหลด)

Uploadify ให้เราสามารถปรับแต่งปุ่มอัพโหลดตามใจเรา โดยเราสามารถเปลี่ยนคำ และเปลี่ยนปุ่มเป็นรูปภาพได้ อีกทั้งสามารถเขียนควบคุมมันได้ด้วยโค้ด CSS ธรรมดานี่แหละ สะดวกมาก ๆ

งั้นเรามาดูตัวอย่างกันดีกว่า เช่น ผมเขียนโค้ด CSS ขึ้นมา 1 ตัว ตามด้านล่าง นี่คือปุ่มของผมแล้วกันฟอนต์ 1.2em สีแดง

Code

.mybutton {
font-size: 1.2em;
color: red;
height: 40px;
padding: 15px 5px;
}

ต่อไปเราก็จะเปลี่ยนคำพูดการอัพโหลดของเรา บนปุ่มใหม่ เช่นผมต้องการเปลี่ยนเป็นคำว่า "ภาพโปรไฟล์ของคุณ" เราจะใช้ตัว Options ของมันคือ buttonText ตามตัวอย่างด้านล่าง

Code

$(function() {
$('#file_upload').uploadify({
buttonClass : 'mybutton', // เรียกใช้ CSS : mybutton
buttonText : 'ภาพโปรไฟล์ของคุณ', // เปลี่ยนคำพูดบนปุ่มอัพโหลด
fileTypeExts : '*.gif;*.png ',
height: '60px;',
uploader : 'uploadify.php'
});
});

จากตัวอย่างด้านบน มีการปรับหน้าตาปุ่มด้วยการใช้ CSS เข้ามาควบคุมด้วย การใช้ Options : buttonClass จากนั้นก็ใส่ชื่อ clsss เข้าไปก็เรียบร้อย ดังภาพด้านล่าง

ส่วนหากใครจะเปลี่ยนปุ่มเป็นรูปภาพ ก็เปลี่ยนไปใช้ Options : buttonImage และก็ใส่พาทไฟล์ภาพไปก็ใช้ได้ล่ะ ดังภาพด้านล่าง

โดยต้องเขียน CSS ร่วมด้วยนิดหน่อย เพื่อนำ background สีดำด้านหลังออก

Code

.mybutton {
background: none;
border: 0;
}

ส่วนด้านโค้ด jQuery ก็เขียน Options : buttonImage กำหนดพาทปุ่มไฟล์ภาพ ที่ต้องการและเขียน Options: width เพื่อกำหนดขนาดให้พอดีกับภาพของเราอีกทีก็ใช้ได้แล้ว ดังตัวอย่างด้านล่าง

Code

// โค้ด jQuery
$(function() {
$('#file_upload').uploadify({
buttonClass : 'mybutton',
buttonImage : 'button.jpg',
width : '70',
fileTypeExts : '*.gif;*.png ',
uploader : 'uploadify.php'
});
});

ขึ้นไปด้านบน