Cách tốt nhất để thay thế nút duyệt tệp trong html là gì?

Question

Tôi biết rằng có thể thay thế nút duyệt, được tạo bằng html, khi bạn sử dụng thẻ input với type="file.

Tôi không chắc chắn cách nào là tốt nhất, vì vậy nếu ai đó có kinh nghiệm với điều này, vui lòng đóng góp.

Answer 1

Cách tốt nhất là làm cho việc kiểm soát đầu vào tập tin gần vô hình (bằng cách cho nó một opacity rất thấp - không làm "visibility: hidden" hoặc "display: none") và hoàn toàn vị trí một cái gì đó dưới nó - với một số thấp hơn z-index.

Bằng cách này, điều khiển thực tế sẽ không hiển thị và bất kỳ điều gì bạn đặt trong đó sẽ hiển thị qua. Nhưng vì điều khiển được đặt ở trên nút đó, nó sẽ vẫn nắm bắt các sự kiện nhấp chuột (đây là lý do bạn muốn sử dụng độ mờ, không hiển thị hoặc hiển thị - trình duyệt làm cho phần tử không thể nhấp được nếu bạn sử dụng phần tử đó để ẩn nó).

This article đi sâu về kỹ thuật.

Answer 2

Đây không phải là kỹ thuật có thể cho mục đích bảo mật, do đó người dùng không thể bị lừa.

Tuy nhiên, có một số giải pháp thay thế - hãy xem http://www.quirksmode.org/dom/inputfile.html để biết ví dụ.

Để lưu nội dung, câu hỏi này đã được yêu cầu here (trong đó tôi đã trả lời giống nhau).

Answer 3

Trình duyệt không thực sự thích bạn gây rối với đầu vào tệp nhưng có thể thực hiện việc này. Tôi đã nhìn thấy một vài kỹ thuật, nhưng cách đơn giản nhất là hoàn toàn định vị đầu vào tệp trên bất kỳ thứ gì bạn muốn sử dụng làm nút và đặt độ mờ của nó thành 0 hoặc gần bằng 0. Điều này có nghĩa là khi người dùng nhấp vào hình ảnh (hoặc bất kỳ thứ gì bạn có dưới đó), họ đang thực sự nhấp vào nút duyệt ẩn.

Ví dụ:

<input type="file" id="fileInput"> 
<img src="..."> 

#fileInput{ 
    position: absolute; 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
} 

Answer 4

Nếu bạn không nhớ sử dụng javascript bạn có thể đặt opasity của tập tin đầu vào để 0, đặt kiểm soát theo kiểu của bạn trên đầu qua z-index và gửi nhấp chuột từ nút của bạn đến tệp-đầu vào. Xem tại đây để biết kỹ thuật: http://www.quirksmode.org/dom/inputfile.html

Answer 5

Bạn cũng có thể sử dụng trình tải lên Flash như SWFupload để thực hiện việc này.