Thay đổi giao diện cho browse input file

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 4/1/09.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    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:

    [​IMG]

    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. Lý đó nút file sẽ có kiểu hiển thị tùy ý. Ví dụ như [​IMG]

    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ẻ đẹp 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:

    Mã:
    <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ỉ http://www.quirksmode.org/dom/inputfile.html.

    Theo VietNam PHP Blog
     
Đang tải...

Chia sẻ trang này