Phát hiện hỗ trợ trình duyệt của phần tử nhập tệp html

Question

Có cách nào với javascript/jquery/crazy-css-hack để phát hiện xem trình duyệt của người dùng có hỗ trợ hiển thị phần tử tải lên tệp <input type="file" /> chức năng không? Ví dụ: trình duyệt Safari trên iOS sẽ không hiển thị phần tử và thay vào đó tôi muốn hiển thị thông báo cho người dùng rằng chức năng không được hỗ trợ. Tôi biết tôi có thể kiểm tra các đại lý người dùng và kiểm tra xem nó là một iphone/ipad/etc nhưng tôi không biết những gì các trình duyệt khác làm hoặc không hỗ trợ nó hoặc sẽ hoặc sẽ không hỗ trợ nó trong tương lai.

Answer 1

Câu trả lời của Galambalaz chỉ cho tôi đúng hướng cho iOS. Tôi đã sử dụng điều này:

function supportsFileInput() { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", "file"); 
    return dummy.disabled === false; 
} 

Tuy nhiên, nó không hoạt động cho hầu hết các thiết bị Android vì chức năng này luôn trả về true nhưng hiển thị nút có nội dung "Tải lên bị tắt".

Answer 2

Bạn có thể viết một hàm để làm giả thử nghiệm:

function supportInputType(type) { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", type); 
    return dummy.type !== "text"; 
} 

Hơn thế nữa nếu bạn muốn thực hiện một lần duy nhất:

var SUPPORT_INPUT_FILE = supportInputType("file"); 

Sau đó, bạn có thể sử dụng "liên tục" trong tất cả các mã của bạn.

Cách kiểm tra hoạt động: Đầu tiên nó tạo thành phần tử giả. Nó sẽ có mặc định type = "text". Tiếp theo, bạn thử đặt nó thành file. Trong trường hợp trình duyệt không hỗ trợ loại này, trình duyệt sẽ vẫn giữ nguyên là text.

Hãy vui vẻ!

Answer 3

iOS hiển thị phần tử nhập tệp là "bị tắt". Vì vậy, bạn có thể kiểm tra nếu có trường nhập bị vô hiệu hóa. Tôi đã sử dụng jQuery để làm như vậy.

jQuery(function($) { 
    $(this).find('[type=file]').each(function() { 
     if ($(this).attr('disabled')) { 
     // do sth. 
     }  
    }) 
});