Html File Input Control With Capture and Accept Attributes Works Wrong

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.

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


Related Topics



Leave a reply



Submit