save and display image captured from input type=file

javascript jquery html input-type-file
rawatdeepesh picture rawatdeepesh · Apr 7, 2017 · Viewed 8.3k times · Source

I have a webpage with capture image from the Available camera feature. For the web version it simply places the video capture onto a canvas. However for a phone, I am using <input class="btn btn-info" type="file" accept="image/*" id="cameraCapture" capture="camera"> to capture a picture. It asks the user to either capture the image using the phone's camera or upload from its filesystem/gallery etc. Once the image is clicked it simply places the image's name next to the button. Is there a way to access this image and display it in the same page.

Thanks in advance

Answer

Nadia Ghebreial picture Nadia Ghebreial · Apr 7, 2017

You can do that with JS using FileReader object.

Take a look at this answer: preview-an-image-before-it-is-uploaded

I hope it helps

Related questions

How to clear files from <input type='file' /> using jQuery or JavaScript

There are several <input type='file' /> fields in my file and there are no any html forms. I want to clear attached files from particular <input type='file' />. Not from the all fields. I have use $(…

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is …

Read More