我一直在寻找使用html 5 <input type="file" accept="image/*" capture="camera">从我的webapp拍照并使用php将图像上传到数据库 - 这现在正常工作.
但是,我似乎找到显示"拍照"选项的唯一方法是通过一个文本字段,其中有一个名为"选择文件"的按钮
有没有办法能够点击现有图像打开拍照选项,然后在用户拍摄照片/文件后选择显示新图像而不是现有图像？如果他们愿意保存图像,则应单击"上传"按钮.
在这里看到JS小提琴,希望这有一定道理! http://jsfiddle.net/6dxGY/
mdu*_*sch 32
你必须使用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);
});
pse*_*ant 29
我知道这是一个老问题,但我在试图解决同样的问题时遇到了它.我认为值得分享我在其他地方找不到的解决方案.
基本上解决方案是使用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>dus*_*uff 13
您可以通过发送Javascript单击事件来触发文件输入元素,例如
<input type="file" ... id="file-input">
$("#file-input").click();
例如,您可以将其放在图像的单击事件处理程序中,然后使用CSS隐藏文件输入.即使它是隐形的,它仍然可以工作.
一旦您使该部分工作,您可以change在input元素上设置一个事件处理程序,以查看用户何时将文件放入其中.此事件处理程序可以使用以下方法为图像创建临时"blob"URL window.URL.createObjectURL:
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
该URL可以设置为src页面上的图像.(但它仅适用于该页面.请勿尝试将其保存在任何地方.)
请注意,并非所有浏览器目前都支持相机捕获 (事实上,大多数桌面浏览器都没有.)如果要求用户选择文件,请确保您的界面仍然有意义.
小智 6
对于需要输入文件直接打开相机的用户，您只需capture向输入文件声明参数，如下所示：
<input type="file" accept="image/*" capture>