html5< input type =" file"接受= QUOT;图像/ *"捕获= QUOT;照相机QUOT;>显示为图像而不是“选择文件”按键 [英] html5 <input type="file" accept="image/*" capture="camera"> display as image rather than "choose file" button

问题描述

我一直在研究如何使用html 5 < input type =fileaccept =image / *capture =camera> 图片从我的web应用程序，并上传图像到数据库使用PHP - 这是现在正常工作。

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.

但是，我似乎可以发现显示采取图片选项是由一个文本字段，其中有一个名为选择文件的按钮

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.

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

See JS fiddle here, hopefully this makes some sense! http://jsfiddle.net/6dxGY/

推荐答案

为此，您必须使用 Javascript Filereader 。 （介绍到filereader-api： http://www.html5rocks.com/en/tutorials/file/dndfiles/ ）

You have to use Javascript Filereader for this. (Introduction into filereader-api: http://www.html5rocks.com/en/tutorials/file/dndfiles/)

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

Once the user have choose a image you can read the file-path of the chosen image and place it into your 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);
});

这篇关于html5< input type =" file"接受= QUOT;图像/ *"捕获= QUOT;照相机QUOT;>显示为图像而不是“选择文件”按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！