html — input[type=»file»] проверить наличие вложенного файла с помощью css
спросил
Изменено 7 лет, 6 месяцев назад
Просмотрено 3к раз
Это не вопрос JS, просто ищу четкое решение css, если это возможно.
Для переключателя или флажка мы можем использовать : проверено псевдокласс:
ввод {
% стилей %
}
ввод: проверено {
% другие стили %
}
Существуют ли способы проверки наличия вложенного файла с помощью CSS?
- HTML
- CSS
- ввод
2
(обновлено, в связи с непониманием вопроса)
Есть возможность проверить прикреплён ли файл по атрибуту требуется .
См.: http://jsfiddle.net/1ua59jt1/1/
HTML:
CSS:
#file:valid { color: green; }
#file:invalid {цвет: красный; }
Но вы никогда не сможете проверить, был ли таким образом выбран «правильный» файл. Вы можете только проверить, был ли файл выбран вообще.
// завершение обновления:
Обязательный атрибут — это HTML5. Имейте в виду, что не все браузеры поддерживают это: http://www.w3schools.com/tags/att_input_required.asp
Это означает, что единственным надежным способом проверки на стороне клиента является использование JavaScript. Если вы хотите это сделать, я рекомендую использовать атрибут novalidate в вашей форме, чтобы отключить проверку браузера по умолчанию (http://www.w3schools.com/tags/att_form_novalidate.asp).
Но также всегда использует проверку на стороне сервера .
3
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Использование ввода HTML-файла для загрузки собственных файлов iOS/Android
Джош Морони
4 минуты чтения
Native IntegrationBackendformsall
Первоначально опубликовано 20 октября 2020 г.
В последнем уроке мы рассмотрели, как обрабатывать загрузку файлов в Ionic с помощью Node / Express (также доступно расширение учебника, в котором вместо этого мы создаем серверную часть с помощью NestJS).
Эти руководства посвящены настольной/веб-среде , но что мы делаем для обработки загрузки файлов, когда наши приложения изначально развернуты на iOS или Android ? Можем ли мы по-прежнему использовать ?
Ответ на этот вопрос в основном да , но есть несколько вещей, о которых следует помнить.
Outline
Прежде чем мы начнем
В чем разница между веб- и нативной загрузкой файлов?
Различия в поведении ввода файла между IOS и Android
Стандартный вход файлов
Ограничивающий файл вход для изображений
Использование камеры для файла
с использованием камеры для файла
2.
на видеоОграничение ввода файлов аудио
Как загрузить эти файлы на сервер?
Резюме
на видеоПрежде чем мы начнем
Если вы еще не читали (или не смотрели) предыдущий урок, было бы неплохо завершить его, прежде чем читать этот. Предыдущее руководство предоставляет много важного контекста о том, как элементы HTML работают при указании типа файла , а также о том, как эти файлы могут быть загружены на внутренний сервер с multipart/form-data и FormData API.
В чем разница между веб- и нативной загрузкой файлов?
Когда мы используем элемент в стандартной настольной/веб-среде, мы можем быть совершенно уверены в его поведении. Мы нажимаем кнопку Выбрать файл , и открывается окно проводника, в котором мы можем выбрать любой файл на нашем компьютере.
Когда мы пытаемся сделать это на мобильном телефоне, поведение будет совершенно другим, и именно то, как оно будет вести себя, будет зависеть от платформы.
Вообще говоря, процесс все еще более или менее такой же — пользователь нажимает кнопку, выбирает файл, и тогда мы можем получить ссылку на этот файл. Однако у нас нет стандартного всплывающего окна «проводника файлов», позволяющего пользователю выбрать любой файл на своем устройстве. В зависимости от контекста камера может быть запущена напрямую, или пользователю может быть предложено выбрать файл непосредственно из файловой системы, или пользователю может быть предложен выбор между просмотром файлов, фотографированием, видеосъемкой и т. д. на.
Давайте рассмотрим различные способы настройки ввода файла.
Различия в поведении ввода файлов между iOS и Android
Хотя приведенный ниже список не является исчерпывающим списком способов настройки элемента ввода файлов, это довольно хороший набор примеров, которые мы могли бы использовать по умолчанию.
ПРИМЕЧАНИЕ. В приведенных ниже примерах используются привязки событий Angular для обработки события change , но в остальном реализация будет такой же, как и в vanilla 9.
0058 JavaScript , StencilJS , React , Vue или что-то еще, что вы используете.
Стандартный ввод файла
На iOS пользователю будет предложено выбрать между Сделать фото или видео , Библиотека фотографий или Просмотрите , чтобы вернуть нужный файл.
На Android это напрямую запускает собственный экран выбора файлов для выбора любого файла на устройстве.
Ограничение ввода файлов изображениями
В iOS пользователю будет предложено выбрать между Сделать фото
Фотобиблиотека или Просмотреть , чтобы вернуть нужный файл. Обратите внимание, что Видео больше не является выбором в первом варианте, и видео (и другие файлы) также будут исключены из списка, если пользователь решит выбрать существующую фотографию.
На Android снова откроется тот же собственный экран выбора файлов, но на этот раз он будет отфильтрован для показа только изображений.
Использование камеры для ввода файлов
На iOS это напрямую запустит камеру в режиме Photo и позволить пользователю сделать снимок. После того, как пользователь сделает фотографию, он сможет выбрать, использовать ли эту фотографию или сделать ее повторно. Как только пользователь выбирает Использовать Фото файл будет предоставлен приложению.
На Android это напрямую запускает камеру, позволяя пользователю делать фото (не видео). Затем пользователь может принять сделанную фотографию или сделать другую.
Ограничение ввода файлов для видео
В iOS пользователю будет предложено выбрать между Снять Видео , Библиотека фотографий или Просмотрите , чтобы вернуть нужный файл.
Обратите внимание, что Photo больше не является выбором в первом варианте, и фотографии (и другие файлы) также будут исключены из списка, если пользователь решит выбрать существующее видео.
На Android снова запустится собственный экран выбора файлов, но на этот раз он будет отфильтрован для показа только видео.
Ограничение ввода файла аудио
На iOS пользователю будет предложено выбрать между
Сделать фото или видео,Библиотека фотографийилиПросмотрите, чтобы вернуть нужный файл. Обратите внимание, что нет ограничений на аудиофайлы только в этом случае.На Android снова запустится собственный экран выбора файлов, но на этот раз он будет отфильтрован для отображения только аудиофайлов.
Имейте в виду, что спецификация элемента ввода файла менялась с течением времени, поэтому вы можете найти много разных примеров того, как настроить этот элемент и заставить выполнять определенные действия.
Если вам нужен больший контроль над этим процессом способами, которые не позволяет использовать элемент ввода файла (или, по крайней мере, он не позволяет это последовательно на разных платформах), вы можете вместо этого использовать собственные плагины/API. Camera API, например, даст вам гораздо больший контроль над процессом выбора/снятия фотографии, чем элемент
.Как загрузить эти файлы на сервер?
К счастью, результирующую ссылку на файл можно загрузить так же, как файл, полученный из обычного элемента ввода файла на рабочем столе или в Интернете.
В общем, мой совет: не пытаться «играть в систему». Используйте самые простые варианты и сосредоточьтесь на том, чтобы сообщить браузеру, чего вы хотите, а затем пусть платформа решит, как лучше всего выполнить этот запрос. Если вы попытаетесь стать слишком хитрым и взять на себя этот процесс, чтобы обеспечить то, что вы хотите, вы оставите себя уязвимым для различного поведения на разных платформах / версиях, а также ваше решение будет более подвержено взлому в будущем.