JavaScript中的本地文件支持检测-Windows Phone 8错误

Question

I have a question about <input type=file> HTML element -- specifically, why all signs point to it being supported on Windows Phone 8 (IE 10 Mobile), yet it really doesn't work.

I have been working on a photo uploader project, and in the Javascript development, I have logic in place to check for File API support, so I know if I can support local file selection. Surprisingly, the code I have in place is returning a true value on Windows Phone 8. This shouldn't be an issue, however the <input type=file> element isn't really supported for WP 8 (as noted on the Windows blog in an article about IE 10 for Mobile ). The result on a WP 8 is if an <input type=file> element is on the page, it shows up just fine, but nothing happens when clicking the "Browse" button.

My JS code to check File API support is:

function checkLocalFileSupport() {
   if (window.File && window.FileReader && window.FileList && window.Blob) {
       return true;
   }
   return false;
}

I'm hoping someone could shed some light on how to better check and confirm if local file selection is available on a specific device/browser. As I said, my current solution returns true on WP 8. I've been trying a variety of different methods to see if an <input type=file> is enabled (snippets below), but all of the other solutions still return true for WP 8.

One caveat is this: I really want the code to be device-agnostic. As such, I don't want to have to sniff for a browser user-agent. In my mind, user-agent sniffing is a fallback that I'd rather not have to implement.

Here are a few solutions I've found and tried, yet still return true on WP 8:

Referencing the disabled attribute on the input element:

function isInputTypeFileImplemented() {
    var elem = document.createElement("input");
    elem.type = "file";
    if (elem.disabled) return false;
    try {
        elem.value = "Test"; // Throws error if type=file is implemented
        return elem.value != "Test";
    } catch(e) {
        return elem.type == "file";
    }
}

Using jquery.support:

var support = (function(undefined) {
    return $("<input type='file'>")    // create test element
                 .get(0)               // get native element
                 .files !== undefined; // check whether files property is not undefined
})();

Hopefully someone can help shed some light on how to accurately get WP 8 to return a false value for local file support.

Thanks in advance!

Answer 1

According to this blog post some systems return false positive support and you can overcome this by checking them with RegExp such as

if (navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
   return false;
}