Php html5<；输入类型="；文件"；接受=”；图像/*”；捕获="；照相机“&燃气轮机；显示为图像而不是“显示”；选择文件"；按钮

我一直在考虑使用HTML5

从我的Web应用程序中拍摄照片，并使用php将图像上传到数据库中，这一点现在可以正常工作了

然而，我能找到的显示“拍照”选项的唯一方法是通过一个文本字段，该字段中有一个名为“选择文件”的按钮

是否有一种方法可以单击现有图像打开拍照选项，然后在用户选择照片/文件后显示新图像而不是现有图像？如果他们愿意保存图像，则应单击“上载”按钮

看到JS小提琴在这里，希望这有一些意义！

---

为此，您必须使用Javascript文件阅读器。（filereader api简介：）

一旦用户选择了图像，您就可以读取所选图像的文件路径并将其放入html中

例如：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

---

您可以通过向文件输入元素发送Javascript单击事件来触发它，例如

<input type="file" ... id="file-input">

$("#file-input").click();

该URL可以设置为页面上图像的

src

。（不过，它只在该页面上起作用。不要尝试将其保存到任何地方。）

---

请注意，目前并非所有浏览器都支持摄像头捕获。（事实上，大多数桌面浏览器都没有）如果用户被要求选择一个文件，请确保您的界面仍然有意义。

我知道这是一个老问题，但我在试图解决同样的问题时遇到了它。我认为这是值得分享的解决方案，我没有找到其他地方

基本上，解决方案是使用CSS隐藏

元素，并在其周围设置一个

样式，使其看起来像一个按钮。单击“运行代码段”按钮查看结果

我以前使用过JavaScript解决方案，效果也很好，但只使用CSS就可以解决“表示”问题

label.cameraButton{
显示：内联块；
利润率：1米0；
/*使其看起来像按钮的样式*/
填充：0.5em；
边框：2个实心#666；
边框颜色：#EEE#CCC#CCC#EEE；
背景色：#DDD；
}
/*看起来像一个点击/按下的按钮*/
label.cameraButton：活动{
边框颜色：#CCC#EEE#EEE#CCC；
}
/*这是实际上隐藏相机输入的“选择文件”文本框的部分*/
label.cameraButton输入[接受*=“摄像机”]{
显示：无；
}

漂亮的图像捕捉按钮
拍一张照片

对于那些需要输入文件直接打开相机的人，您只需在输入文件中声明

capture

参数，如下所示：

---

奇怪的是，这可能会在我的Firefox 50桌面上打开文件上传。但是

navigator.getUserMedia

工作正常当前，只有移动浏览器尊重文件

上的

accept=“image/*；capture=camera”属性。桌面浏览器忽略了这一点，所以它们只能使用普通的文件选择器
getUserMedia
是从浏览器中从台式机/笔记本电脑的摄像头获取图像的唯一方法。这很好，但是否还有一种方法可以强制手机打开文件选择器，而不是让用户选择？
<input type="file" ... id="file-input">

$("#file-input").click();

var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);