จะแก้ไข css ของ input type=file ได้อย่างไร

เริ่มโดย barbies55, 05 พฤษภาคม 2009, 18:35:19

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

barbies55

05 พฤษภาคม 2009, 18:35:19
ปกติ เวลาทำ input type file มันจะมีปุ่ม browse ขึ้นมาให้แบบอัตโนมัติ
ทีนี้จะทำอย่างไรที่จะปรับแต่งให้เป็นรูปแบบที่เราต้องการได้คะ
หยินไปเจอข้อมูลจาก
http://www.quirksmode.org/dom/inputfile.html

ลองทำตามเขา แบบงูๆปลาๆ แต่ออกมาไม่ได้แบบเขาเลยอ่ะค่ะ
หรือว่าเราจะโง่อ่านผิดๆถูกๆก้ไม่รู้  :-X

ใครมาช่วยจับมือทำหน่อยค่ะ  :'(
รับทำเทมเพลท รับโมเทมเพลทให้เข้ากับสคริปต์ต่างๆ


On the Internet, Never One Know You are a Dog.
ผ้าขี้ริ้วห่อทองย่อมเป็นทองฉันใด เอาทองเปลวมาห่อขี้ก็ยังเป็นขี้ฉันนั้น

beg

#1
05 พฤษภาคม 2009, 20:29:36 แก้ไขล่าสุด: 05 พฤษภาคม 2009, 20:41:44 โดย beg
ลองดูโค้ดตามตัวอย่างด้านล่าง ในส่วน head  เปลี่ยนชื่อภาพของปุ่ม browse ตามที่ต้องการ และในส่วนของ Body  ใช้ onload="initFileUploads();"  เพื่อเรียงใช้งาน javascripts  และตรง div class="fileinputs"  ให้เอาไปใส่ใน form อัพโหลด


ไฟล์ test.html 
อ้างถึง
<html>
<head>
<script type="text/javascript">
var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
   if (!W3CDOM) return;
   var fakeFileUpload = document.createElement('div');
   fakeFileUpload.className = 'fakefile';
   fakeFileUpload.appendChild(document.createElement('input'));
   var image = document.createElement('img');
   image.src='ww2kev/Emoticon1.gif'; //เปลี่ยนภาพปุ่มตรงนี้
   fakeFileUpload.appendChild(image);
   var x = document.getElementsByTagName('input');
   for (var i=0;i<x.length;i++) {
      if (x.type != 'file') continue;
      if (x.parentNode.className != 'fileinputs') continue;
      x.className = 'file hidden';
      var clone = fakeFileUpload.cloneNode(true);
      x.parentNode.appendChild(clone);
      x.relatedElement = clone.getElementsByTagName('input')[0];
      x.onchange = x.onmouseout = function () {
         this.relatedElement.value = this.value;
      }
   }
}
</script>
<style type="text/css">
<!--

a {text-decoration:none}



div.fileinputs {
   position: relative;
}

div.fakefile {
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
}

input.file {
   position: relative;
   text-align: right;
   -moz-opacity:0 ;
   filter:alpha(opacity: 0);
   opacity: 0;
   z-index: 2;
}


//-->
</style>
</head>
<body onload="initFileUploads();">
<div class="fileinputs">
   <input type="file" class="file">
</div>
</body>
</html>





barbies55

#2
05 พฤษภาคม 2009, 23:21:47
ขอบคุณมากค่ะ
ลองทำตามนี้แล้ว ก็ยังไม่ได้อยู่ดี
คือหน้าตาออกมาใช่
แต่เวลาใช้งานมันไม่ได้อ่ะค่ะ แบบว่าตัวหนังสือที่ควรจะขึ้นบน input เวลาใส่ไฟล์ลงไป มันไม่มี :-X
รับทำเทมเพลท รับโมเทมเพลทให้เข้ากับสคริปต์ต่างๆ


On the Internet, Never One Know You are a Dog.
ผ้าขี้ริ้วห่อทองย่อมเป็นทองฉันใด เอาทองเปลวมาห่อขี้ก็ยังเป็นขี้ฉันนั้น

beg

#3
06 พฤษภาคม 2009, 09:02:02
อ้างถึงจาก: barbies55 ใน 05 พฤษภาคม 2009, 23:21:47
ขอบคุณมากค่ะ
ลองทำตามนี้แล้ว ก็ยังไม่ได้อยู่ดี
คือหน้าตาออกมาใช่
แต่เวลาใช้งานมันไม่ได้อ่ะค่ะ แบบว่าตัวหนังสือที่ควรจะขึ้นบน input เวลาใส่ไฟล์ลงไป มันไม่มี :-X

ตัวหนังสือตรงไหนอ่ะครับ ในหน้าตัวอย่างก็ไม่มีนะ   ถ้าหมายถึงตัวหนังสือบนปุ่ม browse คุณต้องสร้างเป็นภาพขึ้นมาเอง   ทำเป็นไฟล์เล็กๆ สัก 30x20 pixel  แล้วใส่ตัวหนังสือลงไปในภาพนี้น่ะ

barbies55

#4
06 พฤษภาคม 2009, 15:25:52
ในเวบตัวอย่างมีค่ะ อันล่างสุดเลย คือปกติเวลาเรา browse ไฟล์แล้ว จะมีชื่อไฟล์ขึ้นในกล่องใช่ป่ะ
แต่ถ้าอาศัย css อย่างเดียว มันจะโดนบังไปอ่ะค่ะ ในเวบตัวอย่างเขาทำให้ดูเป็นขั้นตอนว่า สุดท้ายแล้วใช้จาวาช่วยถึงจะออกมาสมบูรณ์
แต่ลองทำตามเขา ทั้งแกะโค้ดออกมาดูแล้ว ก็ยังทำไม่ได้เลยค่ะ ฮือๆๆ
รับทำเทมเพลท รับโมเทมเพลทให้เข้ากับสคริปต์ต่างๆ


On the Internet, Never One Know You are a Dog.
ผ้าขี้ริ้วห่อทองย่อมเป็นทองฉันใด เอาทองเปลวมาห่อขี้ก็ยังเป็นขี้ฉันนั้น

beg

#5
06 พฤษภาคม 2009, 17:19:07
อ้างถึงจาก: barbies55 ใน 06 พฤษภาคม 2009, 15:25:52
ในเวบตัวอย่างมีค่ะ อันล่างสุดเลย คือปกติเวลาเรา browse ไฟล์แล้ว จะมีชื่อไฟล์ขึ้นในกล่องใช่ป่ะ
แต่ถ้าอาศัย css อย่างเดียว มันจะโดนบังไปอ่ะค่ะ ในเวบตัวอย่างเขาทำให้ดูเป็นขั้นตอนว่า สุดท้ายแล้วใช้จาวาช่วยถึงจะออกมาสมบูรณ์
แต่ลองทำตามเขา ทั้งแกะโค้ดออกมาดูแล้ว ก็ยังทำไม่ได้เลยค่ะ ฮือๆๆ

ผมลองแล้วมันก็ปกตินะครับ  เวลาเลือกไฟล์มันก็แสดงชือไฟล์ ไม่ได้โดนบัง
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้