Обнаруживать, поддерживается ли <input type="file"/">

Ответ 1

Функция для проверки реализации input[type=file]:

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";
    }
}

Fiddle: http://jsfiddle.net/8EqEE/9

Ответ 2

UPDATE: теперь это часть Modernizr.

Существует запрос pull для modernizr, который, похоже, работает. По сути, он просто проверяет:

var elem = document.createElement('input');
elem.type = 'file';
return !elem.disabled;

Ответ 3

Создайте <input type="file"> и проверьте, не отключено ли оно.

function isFileUploadImpossible() {
    var el = document.createElement("input");
    el.setAttribute("type", "file");
    return el.disabled;
}

Протестировано в iOS 4.2.1, Android 2.3.4, Chrome 17, Firefox 11, IE7.

Ответ 4

Обратите внимание, что я не тестировал это, поэтому я не уверен, что это сработает. Это в основном то, как вы тестируете поддержку типов ввода HTML5 (например, <input type="color" />). Но вы можете попробовать:

function upload_supported() {
  var file_input = document.createElement("input");
  file_input.setAttribute("type", "file");
  return file_input.type !== "text";
}

Это зависит от поведения браузера при сбросе атрибута type на text, когда он встречает неизвестный тип ввода. Однако, поскольку вы говорите, что оно кажется серым, это будет означать, что оно не неизвестно, как таковое.

Ответ 5

Гибрид проверки ошибок на основе значений (try/catch) плюс проверка на наличие отключений, похоже, дает хорошее покрытие для всех тестируемых ПК и мобильных браузеров.

alert((function isInputTypeFileImplemented(){
  var elem;
  try {
    elem = document.createElement("input");
    elem.type = "file";
  } catch(e) {
    return -1; // type=file is not implemented  
  }
  try {
    elem.value = "Test";
    if (elem.value == "Test") {
      return -2; // type=file should throw an error on line above
    } else {
      if (elem.disabled) {
        return -3; // type=file disabled in iOS < 6
      } else {
        return true;
      }
    }
  } catch(e){
    return true; // type=file implemented correctly
  }
})())

ПРИМЕЧАНИЕ. Вы можете изменить логический порядок, если вы предпочитаете другой поток.

Fiddle: http://jsfiddle.net/BRk5J/

Ответ 6

Обновление до решения Rob W выше, которое поддерживает бета-версию iOS 5 + iOS 6. (Вызывать исключение не то, что я бы рекомендовал, но это работает):

     function isInputTypeFileImplemented(){
        var elem = document.createElement("input");
        elem.type = "file";
        try {
            elem.value = "Test"; //If type=file is implemented, this would throw an 
            if (elem.disabled) {
                return false;
            } else {
                return true;
            }
        } catch(e){
            return false;
        }
    }

Ответ 7

Я тоже искал решение этой проблемы. Это не так просто, как предлагаемые здесь решения. Некоторые из браузеров утверждают, что поддерживают определенные типы, но некоторые из этих типов были отключены из-за неполноты. Итак, что происходит, когда вы возвращаете InputElement.type, он может возвращаться как "файл" или "tel" или "number", но он по-прежнему обрабатывается браузером как "текст". К сожалению, я не думаю, что вы может сделать это atm, если вы не можете поговорить с разработчиками браузера о его исправлении, чтобы отключенные типы возвращались как текст.

в качестве добавленного примечания IE возвращает все неподдерживаемые типы в виде текста. Я тестировал это и с последними версиями Chrome и FF. Chrome "лежит" о поддержке номеров, типов телефонов, которые я знаю до сих пор, и FF также возвращает tel, когда он не поддерживается. Я уверен, что это происходит и с другими типами.