html5 отображается в виде изображения, а не кнопки "выбрать файл"
Я изучал возможность использования html 5 <input type="file" accept="image/*" capture="camera">, чтобы сделать снимок из моего веб-приложения и загрузить изображение в базу данных с помощью php - теперь это работает правильно.
Однако, единственный способ, который я могу найти для отображения опции "сделать снимок", - это текстовое поле, в котором есть кнопка "выбрать файл"
Есть ли способ щелкнуть по существующему изображению, чтобы открыть параметры съемки, а затем отобразить новое изображение вместо существующего изображения после снимок был сделан/файл выбран пользователем? Затем они должны нажать на кнопку "загрузить", если они рады сохранить изображение.
Смотрите здесь JS fiddle, надеюсь, в этом есть какой-то смысл! http://jsfiddle.net/6dxGY/
4 answers
Для этого вы должны использовать Javascript-файлообменник. (Введение в api-интерфейс filereader: 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-адрес "большого двоичного объекта" для изображения с помощью window.URL.createObjectURL, например:
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
Этот URL-адрес можно задать как src для изображения на странице. (Впрочем, это работает только на этой странице. Не пытайтесь сохранить его где-либо.)
Обратите внимание, что в настоящее время не все браузеры поддерживают захват камеры. (На самом деле, большинство настольных браузеров этого не делают.) Убедитесь, что ваш интерфейс по-прежнему имеет смысл, если пользователя попросят выбрать файл.
Для тех, кому нужен входной файл для непосредственного открытия камеры, вам просто нужно объявить параметр capture во входном файле, например:
<input type="file" accept="image/*" capture>