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

Question

Я создаю мобильную версию своего сайта с возможностью загрузки файлов, доступ к которой осуществляется с помощью кнопки "Загрузить".

Я хотел бы скрыть кнопку от пользователей iPhone, поскольку элемент управления выглядит серым - это возможно?

Я действительно не хочу обнаруживать iPhone; Я чувствую, что было бы намного лучше обнаружить функцию - заставить ее работать автоматически, если Apple включит это (или телефон взломан, или что-то...)

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

Скрипка: http://jsfiddle.net/8EqEE/9

Answer 2

ОБНОВЛЕНИЕ: Теперь это часть Modernizr.

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

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

Answer 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.

Answer 4

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

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

Answer 5

Обратите внимание, что я не проверял это, поэтому я не уверен, будет ли это работать. Это в основном то, как вы тестируете поддержку типов ввода 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 когда он встречает неизвестный тип ввода. Однако, поскольку вы говорите, что оно выглядит серым, это означает, что оно само по себе не неизвестно.

Answer 6

Сочетание проверки ошибок на основе значений (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
  }
})())

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

Скрипка: http://jsfiddle.net/BRk5J/

Answer 7

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

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