Я искал использование html 5 <input type="file" accept="image/*" capture="camera"> чтобы сделать снимок с моего webapp и загрузить изображение в базу данных с помощью php – теперь это работает правильно.
Тем не менее, единственный способ показать, что я могу отобразить параметр «взять изображение», – это текстовое поле, в котором есть кнопка, называемая «выбрать файл»,
Есть ли способ щелкнуть по существующему изображению, чтобы открыть параметры изображения, а затем отобразить новое изображение вместо существующего изображения после того, как изображение было снято / выбрано пользователем? Затем они должны нажать кнопку «загрузить», если они счастливы сохранить изображение.
См. Здесь скрипт JS, надеюсь, это имеет смысл! http://jsfiddle.net/6dxGY/
Для этого вам нужно использовать Javascript Filereader . (Введение в filereader-api: http://www.html5rocks.com/en/tutorials/file/dndfiles/ )
Как только пользователь выберет изображение, вы можете прочитать путь к файлу выбранного изображения и поместить его в свой html.
Пример:
<form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form>
Javascript:
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); });
Я знаю, что это старый вопрос, но я столкнулся с этим, пытаясь решить эту же проблему. Я думал, что стоит поделиться этим решением, которого я больше нигде не нашел.
В основном решение заключается в использовании CSS для скрытия элемента <input> и стиля <label> вокруг него, чтобы выглядеть как кнопка. Нажмите кнопку «Выполнить фрагмент кода», чтобы увидеть результаты.
Я использовал JavaScript-решение, прежде чем это сработало хорошо, но приятно решить проблему «презентации» только с помощью CSS.
label.cameraButton { display: inline-block; margin: 1em 0; /* Styles to make it look like a button */ padding: 0.5em; border: 2px solid #666; border-color: #EEE #CCC #CCC #EEE; background-color: #DDD; } /* Look like a clicked/depressed button */ label.cameraButton:active { border-color: #CCC #EEE #EEE #CCC; } /* This is the part that actually hides the 'Choose file' text box for camera inputs */ label.cameraButton input[accept*="camera"] { display: none; }
<!DOCTYPE html> <html> <head> <title>Nice image capture button</title> </head> <body> <label class="cameraButton">Take a picture <input type="file" accept="image/*;capture=camera"> </label> </body> </html>
Вы можете инициировать элемент ввода файла, отправив ему событие клика Javascript, например
<input type="file" ... id="file-input"> $("#file-input").click();
Вы можете поместить это в обработчик события клика для изображения, например, затем скрыть ввод файла с помощью CSS. Он будет работать, даже если он невидим.
После того, как вы заработаете эту часть, вы можете установить обработчик события change на элементе ввода, чтобы увидеть, когда пользователь помещает в него файл. Этот обработчик событий может создать временный URL-адрес «blob» для изображения с помощью window.URL.createObjectURL , например:
var file = document.getElementById("file-input").files[0]; var blob_url = window.URL.createObjectURL(file);
Этот URL-адрес можно установить как src для изображения на странице. (Однако он работает только на этой странице. Не пытайтесь сохранить его в любом месте.)
Обратите внимание, что не все браузеры в настоящее время поддерживают захват камеры. (На самом деле, большинство настольных браузеров этого не делают.) Убедитесь, что ваш интерфейс по-прежнему имеет смысл, если пользователю предлагается выбрать файл.