Làm cách nào để đổi tên nút "duyệt" HTML của loại tệp nhập = tệp?

Question

Cách đổi tên nút duyệt thành "Chọn tệp"? Ví dụ .:

<input type=file name=browse > 

Answer 1

Nút không được gọi vào nút "duyệt" - đó chỉ là tên trình duyệt của bạn cung cấp cho nó. Các trình duyệt được tự do triển khai kiểm soát tải lên tệp nhưng chúng thích. Trong Safari, ví dụ, nó được gọi là "Chọn tập tin" và nó ở phía đối diện của bất cứ điều gì bạn có thể sử dụng.

Bạn có thể triển khai giao diện tùy chỉnh cho điều khiển tải lên bằng cách sử dụng the technique outlined on QuirksMode, nhưng điều đó không chỉ thay đổi văn bản của nút.

Answer 2

Các input type = "file" lĩnh vực là rất khó khăn bởi vì nó thường chạy khác trên mọi trình duyệt, nó không thể theo kiểu, hoặc có thể được theo kiểu một chút, tùy thuộc vào trình duyệt một lần nữa; và rất khó để thay đổi kích thước (tùy thuộc vào trình duyệt một lần nữa, nó có thể có kích thước tối thiểu không thể ghi đè).

Có các giải pháp thay thế. Tốt nhất là theo ý kiến ​​của tôi this one (kết quả là here).

Answer 3

Không, bạn không thể thay đổi văn bản của tệp tải lên tệp. Nhưng có một số thủ thuật để che phủ hình ảnh qua nút.

Answer 4

AFAIK bạn không thể thay đổi văn bản nút, nó được mã hóa cứng trong trình duyệt.

Nhưng có một số cách giải quyết để đặt một nút với khác nhau text/hình ảnh trên một hình thức:

link

Answer 5

Bạn cũng có thể sử dụng Uploadify, một plugin tải lên jQuery tuyệt vời, nó cho phép bạn tải lên nhiều tệp và cũng có thể tạo kiểu cho các trường tệp một cách dễ dàng. http://www.uploadify.com

Answer 6

Một chút JavaScript sẽ chăm sóc nó:

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
    var textinput = document.getElementById("filename"); 
    textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

Không phải là giải pháp tìm kiếm đẹp nhất, nhưng nó hoạt động.

Answer 7

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
} 
function Handlechange() 
{ 
var fileinput = document.getElementById("browse"); 
var textinput = document.getElementById("filename"); 
textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

http://jsfiddle.net/J8ekg/

Answer 8

Bạn có thể làm điều đó với một workaround css/JQ đơn giản: Tạo một nút giả mà gây nên các nút duyệt đó đang ẩn.

HTML

<input type="file"/> 
<button>Open</button> 

CSS

input { display: none } 

jQuery

$('button').click(function(e) { 
    e.preventDefault(); // prevents submitting 
    $('input').trigger('click'); 
}); 

demo

Answer 9

1. Gói số <input type="file"> với thẻ <label>;
2. Thêm thẻ (có văn bản bạn cần) bên trong nhãn, chẳng hạn như <span> hoặc <a>;
3. Làm cho thẻ này trông giống như một nút;
4. Đặt input[type="file"] vô hình qua display: none.