Khi làm việc với form HTML chúng ta sẽ gặp một vấn đề là đối tượng input có thuộc tính type=”file” (<input type = “file” name=”file_browser”…. />) thường có định dạng mặc định theo từng loại browser. Nếu form của chúng ta có định dạng đồng nhất mà anh chàng này chỉ có một định dạng sẽ dẫn đến form không được đẹp mắt cho lắm.Chúng ta hãy xem một ví dụ hiển thị của nút input file trên các trình duyệt khác nhau :
Thật may mắn là Michael McGrady đã tìm được giải pháp hóa giải sự bất tiện này: thay đổi thuộc tính opacity của nút browser bằng 0 và đặt bên dưới nó một nút đã được định dạng. Bằng cách này nút input quen thuộc sẽ … biến mất và thay vào đó là một “nút ảo” đã được chúng ta định dạng. Hãy xem ví dụ này:
Bằng cách này khi nhấn vào nút ảo, các giá trị vẫn được tải lên giống như bạn nhấn vào nút browser. Tuy nhiên, điều kiện là trình duyệt của bạn phải hỗ trợ thuộc tính opacity (hầu hết đều hỗ trợ).
Các bước kĩ thuật để thực hiện việc này như sau:
- Tại nút browser bình thường, đặt cho nó thuộc tính “position:relative” trong định dạng.
- Tạo ra 2 đối tượng <input type=”text” /> và <img src”…” /> là nút select nhưng có vị trí nằm chồng lên vị trí của nút browser ở trên.
- Đặt thuộc tính z-index:2 cho đối tượng <input type=”file” /> ở bước 1. Việc này sẽ làm nó nằm chồng lên 2 đối tượng được tạo ra ở bước 2.
- Đặ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).
- 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 là mã HTML hoàn chỉnh cho các bước trên:
<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 thêm tài liệu tiếng Anh tại địa chỉ : http://www.quirksmode.org/dom/inputfile.html
Nguồn tài liệu: VietNam PHP Blog