Составная форма на мобильных устройствах: управляйте действиями, которые появляются после нажатия на ввод файла

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

<form method="POST" encType="multipart/form-data" action="/uploads" id="forminho">
    <div className="btn btn-success" id="submitFileBtn"> 
        Selecionar Imagem
        <input className="form-control2" type="file" name="upload" id="inputFile" onChange={this.submit}/>
    </div>
</form>

Он работает, как и ожидалось, на настольном компьютере, но на мобильных устройствах я получаю список приложений на выбор, которые практически не имеют отношения к фотографиям. Я получаю: Камера, Видеокамера, Диктофон и Документы (и нет возможности выбрать другое действие).

Как я могу указать, что я ожидаю изображение, и сделать этот список действий настроенным для этого?


person Matheus Alves    schedule 14.06.2017    source источник


Ответы (1)


С помощью HTML5 вы можете проверить, является ли загружаемое изображение изображением с критерием accept="image/*" для <input> как такового:

<input type="file" accept="image/*">

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

Не забудьте также проверить загрузку в бэкэнде! :)

person Obsidian Age    schedule 14.06.2017