php html5 <input type="file" accept="image/*" capture="camera"> 显示为图像而不是“选择文件”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23916566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 <input type="file" accept="image/*" capture="camera"> display as image rather than "choose file" button
提问by Janey
I've been looking into using html 5 <input type="file" accept="image/*" capture="camera">to take a picture from my webapp and upload the image to the database using php - this is now working correctly.
我一直在研究使用 html 5<input type="file" accept="image/*" capture="camera">从我的 web 应用程序中拍照并使用 php 将图像上传到数据库 - 现在可以正常工作了。
However, the only way I can seem to find to display the "take picture" option is by a text field that has a button in it called "choose file"
但是，我似乎找到显示“拍照”选项的唯一方法是通过一个文本字段，其中有一个名为“选择文件”的按钮
Is there a way to be able to click on the existing image to open up the take picture options, then display the new image instead of the existing picture after the picture has been taken/file selected by the user? They should then click on the "upload" button if they are happy to save the image.
有没有办法可以点击现有图像打开拍照选项，然后在用户拍摄/选择文件后显示新图像而不是现有图片？如果他们愿意保存图像，他们应该点击“上传”按钮。
See JS fiddle here, hopefully this makes some sense! http://jsfiddle.net/6dxGY/
在这里查看 JS 小提琴，希望这有点道理！ http://jsfiddle.net/6dxGY/
采纳答案by mdunisch
You have to use Javascript Filereaderfor this. (Introduction into filereader-api: http://www.html5rocks.com/en/tutorials/file/dndfiles/)
为此，您必须使用Javascript Filereader。（filereader-api 介绍：http://www.html5rocks.com/en/tutorials/file/dndfiles/ ）
Once the user have choose a image you can read the file-path of the chosen image and place it into your html.
一旦用户选择了图像，您就可以读取所选图像的文件路径并将其放入您的 html 中。
Example:
例子：
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
Javascript:
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);
});
回答by pseudosavant
I know this is an old question but I came across it while trying to solve this same issue. I thought it'd be worth sharing this solution I hadn't found anywhere else.
我知道这是一个老问题，但我在尝试解决同一问题时遇到了它。我认为值得分享这个我在其他任何地方都找不到的解决方案。
Basically the solution is to use CSS to hide the <input>element and style a <label>around it to look like a button. Click the 'Run code snippet' button to see the results.
基本上，解决方案是使用 CSS 隐藏<input>元素并将其<label>周围的样式设置为看起来像一个按钮。单击“运行代码片段”按钮以查看结果。
I had used a JavaScript solution before that worked fine too but it is nice to solve a 'presentation' issue with just CSS.
我之前使用过一个 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>回答by duskwuff -inactive-
You can trigger a file input element by sending it a Javascript click event, e.g.
您可以通过向文件输入元素发送 Javascript 点击事件来触发它，例如
<input type="file" ... id="file-input">
$("#file-input").click();
You could put this in a click event handler for the image, for instance, then hide the file input with CSS. It'll still work even if it's invisible.
例如，您可以将其放在图像的单击事件处理程序中，然后使用 CSS 隐藏文件输入。即使它是隐形的，它仍然可以工作。
Once you've got that part working, you can set a changeevent handler on the input element to see when the user puts a file into it. This event handler can create a temporary "blob" URL for the image by using window.URL.createObjectURL, e.g.:
一旦你让那部分工作，你可以change在 input 元素上设置一个事件处理程序，以查看用户何时将文件放入其中。此事件处理程序可以使用 为图像创建临时“blob” URL window.URL.createObjectURL，例如：
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
That URL can be set as the srcfor an image on the page. (It only works on that page, though. Don't try to save it anywhere.)
该 URL 可以设置为src页面上的图像。（不过，它仅适用于该页面。不要尝试将其保存在任何地方。）
Note that not all browsers currently support camera capture. (In fact, most desktop browsers don't.) Make sure your interface still makes sense if the user gets asked to pick a file.
请注意，目前并非所有浏览器都支持相机捕获。（事实上，大多数桌面浏览器都没有。）如果用户被要求选择一个文件，请确保您的界面仍然有意义。
回答by Pedro Benevides
For those who need the input file to open directly the camera, you just have to declare captureparameter to the input file, like this :
对于那些需要输入文件直接打开相机的人，您只需capture要向输入文件声明参数，如下所示：
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture>
