Html5 <Input Type="File" Accept="Image/*" Capture="Camera"> Display as Image Rather Than "Choose File" Button

html5 input type=file accept=image/* capture=camera display as image rather than choose file button

You have to use Javascript Filereader for this. (Introduction into 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.

Example:

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

What is the difference between capture=user and capture=camera in input type file tag?

capture="camera" is deprecated in the HTML 5.1 spec.

The capture attributes keywords are user and environment which relate to front and rear facing cameras respectively.

In addition, there is a third state, the implementation-specific state.

The missing value default is the implementation-specific state. The invalid value default is also the implementation-specific state.

You can read more about it here

HTML file input control with capture and accept attributes works wrong?

This is the actual answer. Just post it here for next users:

Actually, it seems that current implementations don’t rely on the
capture attribute at all, but only on the type and accept attributes:
the browser displays a dialog box in which the user can choose where
the file has to be taken, and the capture attribute is not taken
into consideration. For example, iOS Safari relies on the accept
attribute (not capture) for images and videos (not audio). Even if you
don't use the accept attribute, the browser will let you choose
between "Take Photo or Video" and "Choose Existing" (thanks to@firt
for pointing this out).

From this

EDITED 17 Feb 2016:
This behavior is still active on devices.

file input - accept image from camera or gallery on android

If you are using Android 4.4 (Kit Kat) then this is a known issue:
Issue 62220

You can follow the suggested work arounds: HTML file input in android webview (android 4.4, kitkat)

Second use of input file doesn't trigger onchange anymore

Thanks to codingrhythm for leading me on the right track.

What I did was to actually just add the on("change") call again on the field.

So I only altered the clearPictureAttachment() function (called when deleting a picture) to this:

function clearPictureAttachment(){
$("#image-message").attr('value', '');    
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
    $('#editor-photoarea').show();
    ajaxFileUploadMessagePicture();
});
}

Thanks again!

---

Related Topics