Html5 <input type="file" accept = "image/*" capture = "camera" > показывать как изображение, а не кнопку выбора файла

Я искал использование html 5 <input type="file" accept="image/*" capture="camera">, чтобы сделать снимок с моего webapp и загрузить изображение в базу данных с помощью php - теперь это работает правильно.

Тем не менее, единственный способ, который, как мне кажется, может найти для отображения опции "взять снимок", - это текстовое поле с кнопкой в нем "выбрать файл"

Есть ли способ щелкнуть по существующему изображению, чтобы открыть параметры изображения, а затем отобразить новое изображение вместо существующего изображения после того, как изображение было снято/выбрано пользователем? Затем они должны нажать кнопку "загрузить", если они счастливы сохранить изображение.

См. здесь скрипт JS, надеюсь, это имеет смысл! http://jsfiddle.net/6dxGY/

Ответ 1

Для этого вам нужно использовать 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);
});

Ответ 2

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

В основном решение состоит в том, чтобы использовать CSS для скрытия элемента <input> и стиля a <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>

Ответ 3

Вы можете инициировать элемент ввода файла, отправив ему событие клика 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 для изображения на странице. (Он работает только на этой странице. Не пытайтесь сохранить его в любом месте.)

Обратите внимание, что не все браузеры в настоящее время поддерживают захват камеры. (Фактически, большинство настольных браузеров этого не делают.) Убедитесь, что ваш интерфейс по-прежнему имеет смысл, если пользователю предлагается выбрать файл.

Ответ 4

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

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

Ответ 5

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