[Javascript]Thay đổi style cho nút Browse

Lucky_Star · #1 (**permalink**) 22-05-2008, 09:40 AM

Khi làm việc với các đối tượng input của 1 form thì chúng ta gặp phải vấn đề là style cho nút Browse của đối tượnng <input type=file> là không thể thay đổi được. Mà khi chúng ta thay đổi style cho các đối tượng khác của form mà vẫn giữ nút đó thì có vẻ như là không được đồng nhất, vì sự hiển thị của nút này cũng rất khác nhau với từng loại trình duyệt (browser) như hình dưới đây:

Thật may là Michael McGrady đã nghĩ ra 1 giải pháp rất tốt cho trường hợp này. Giải pháp sử dụng thuộc tính opacity của đối tượng input để làm 1 nút giả nằm dưới nút Browse, còn nút Browse nằm trên nhưng với thuộc tính opacity=0 thì sẽ biến mất.
Nếu ko sử dụng kĩ thuật gì thì trình duyệt của bạn sẽ hiển thị như sau:
Còn nếu sử dụng kĩ thuật của Michael McGrady thì bạn có thể hiển thị như sau:

Khi nhấn vào nút select trên thì sẽ hiển thị như chính bạn nhấn vào nút Browse, trông có vẻ good hơn phải ko bạn? (tuy nhiên điều kiện cần là trình duyệt của bạn phải hỗ trợ thuộc tính opacity). Các bước của kĩ thuật như sau:
Bước 1: Tạo 1 đối tượng <input type=”file”> như bình thường, và đặt cho nó thuộc tính "position: relative”
Bước 2: Tạo ra 2 đối tượng <input type=”text”> và <img /> là nút select, như trên những cùng nằm 1 vị trí tuyệt đối với đối tượng <input type=”file”> ở bước 1
Bước 3: Đặt thuộc tính z-index=2 cho đối tượng <input type=”file”> ở bước 1 để nó nằm trên 2 đối tượng bước 2
Bước 4: Đặt thuộc tính opacity=0 cho đối tưọwng <input type=”file”> ở bước 1 để nó biến mất, lúc đó bạn sẽ thấy 2 đối tượng ở bước 2 nhưng khi nhấn vào nút select thì thực ra ta nhấn vào nút Browse của đối tượng <input type=”file”>.(Ở đây ta ko thể dùng thuộc tính visibility:hidden bởi vì nếu dùng thì sẽ ko thể nào kích chuột vào đối tượng đó được)
Bước 5: Khi ta mở 1 cửa sổ browse file ra và chọn 1 file thì đối tượng <input type=”text”> cần phải hiển thị đường dẫn của file đó trong ô text của đối tượng <input type=”file”>, thật đơn giản chúng ta chỉ cần copy giá trị đó vào trong ô text của <input tye=”text”> và điều này cần phải thực hiện = Javascript.
Dưới đây sẽ là các đoạn mã HTML/CSS/JS cho 1 ví dụ hoàn chỉnh:
<html>
<head>
<title>File Upload Example</title>
<style>
form.myform input {
background: url(’input_boxes.gif’) no-repeat 0 -58px;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
form.myform input:focus {
background-color: transparent;
}
form.myform div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.myform input.file {
width: 300px;
margin: 0;
}
form.myform input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.myform div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
</style>
<script>
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=’button_select.gif’;
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName(’input’);
for (var i=0;i<x.length;i++) {
if (x[i].type != ‘file’) continue;
if (x[i].parentNode.className != ‘fileinputs’) continue;
x[i].className = ‘file hidden’;
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName(’input’)[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
</script>
</head>
<body>
<form name=”myform” class=”myform”>
<div class=”fileinputs”>
<input class=”file hidden” type=”file”/>
<div class=”fakefile”>
</div>
</div>
<script>
initFileUploads();
</script>
</form>
</body>
</html>
Các bạn có thể tham khảo tài liệu tiếng anh từ địa chỉ CSS2/DOM - Styling an input type="file".
Theo phpvn

Ðiều Chỉnh
Tạo trang in Email trang này
Xếp Bài
Chế độ bình thường Chuyển sang chế độ Pha trộn Chuyển sang chế độ dạng cây

Chủ đề giống nhau
Ðề tài	Người Gởi	Chuyên mục	Trả lời	Bài mới gởi
[Javascript]Tạo cửa sổ động	Lucky_Star	Thiết kế web	0	22-05-2008 09:11 AM
[Javascript]Quảng cáo chạy dọc 2 bên	Lucky_Star	Thiết kế web	0	22-05-2008 09:10 AM
[javascript]Đồng hồ bằng javascript	Lucky_Star	Thiết kế web	0	22-05-2008 09:07 AM
Chiến dịch tìm người thay thế	Lucky_Star	Kỹ năng Kinh doanh, quản lý	0	19-05-2008 10:28 AM
Thay Đổi Nghề Nghiệp	Lucky_Star	Tâm lý, Cuộc sống	0	02-05-2008 12:17 PM

Ðang đọc: 1 (0 thành viên và 1 khách)