Question

我一直在研究使用html 5 <input type="file" accept="image/*" capture="camera">从我的webapp拍照并使用php将图像上传到数据库 - 这现在正常工作。

然而，我似乎唯一可以找到显示＆＃34;拍照＆＃34;选项是一个文本字段，其中有一个名为＆＃34的按钮;选择文件＆＃34;

有没有办法能够点击现有图像打开拍照选项，然后在拍摄照片/用户选择文件后显示新图像而不是现有图像？然后他们应该点击＆＃34;上传＆＃34;按钮，如果他们很乐意保存图像。

在这里看到JS小提琴，希望这是有道理的！ http://jsfiddle.net/6dxGY/

Answer 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);
});

Answer 2

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

基本上，解决方案是使用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>

Answer 3

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

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

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

例如，您可以将其放在图像的单击事件处理程序中，然后使用CSS隐藏文件输入。即使它不可见，它仍然可以工作。

一旦您使该部分工作，您可以在input元素上设置change事件处理程序，以查看用户何时将文件放入其中。这个事件处理程序可以创建一个临时的＆＃34; blob＆＃34;使用window.URL.createObjectURL的图片网址，例如：

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

该网址可以设置为页面上图片的src。（但它只适用于那个页面。不要试图将它保存在任何地方。）

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

Answer 4

对于那些需要输入文件直接打开相机的人，您只需要在输入文件中声明capture参数，如下所示：

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

html5 <input type =“file”accept =“image / *”capture =“camera”/>显示为图像而不是＆＃34;选择文件＆＃34;按键

4 个答案: