javascript - Detect browser support of html file input element - Stack Overflow

admin管理员组

文章数量:1356285

Is there a way with a javascript/jquery/crazy-css-hack to detect if the user's browser supports rendering a functional <input type="file" /> file upload element? For example, the safari browser on iOS won't render the element and I would like to instead show a message to the user that the functionality isn't supported. I know I can inspect the user agent and check to see if it an iphone/ipad/etc but I don't know what other browsers do or do not support it or will or will not support it in the future.

Is there a way with a javascript/jquery/crazy-css-hack to detect if the user's browser supports rendering a functional <input type="file" /> file upload element? For example, the safari browser on iOS won't render the element and I would like to instead show a message to the user that the functionality isn't supported. I know I can inspect the user agent and check to see if it an iphone/ipad/etc but I don't know what other browsers do or do not support it or will or will not support it in the future.

• javascript
• html

Share Improve this question Follow asked Nov 8, 2010 at 20:36 bkaidbkaid 52.1k2323 gold badges115115 silver badges128128 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Galambalazs' answer pointed me in the right direction for iOS only. I ended up using this:

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

However, it doesn't work for most Android devices, as this function always returns true but renders the button with the text "Uploads disabled".

You can write a function to do dummy test:

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

Better yet if you want to execute only once:

var SUPPORT_INPUT_FILE = supportInputType("file");

Then you can use this "constant" in all your code.

The way the test works: First it creates a dummy element. It will have the default type = "text". Next you try to set it to file. In case the browser doesn't support this type it will remain text.

Have fun!

iOS renders the file input element as "disabled". So you can test if there is a disabled input field. I used jQuery to do so.

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

本文标签： javascriptDetect browser support of html file input elementStack Overflow