ลองดูโค้ดตามตัวอย่างด้านล่าง ในส่วน 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>
พัฒนาเว็บไซต์
