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

Question

I ve been looking into using html 5  lt input type  file  accept  image    capture  camera  gt  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   See JS fiddle here  hopefully this makes some sense  http   jsfiddle net 6dxGY

User · Answer

For those who need the input file to open directly the camera  you just have to declare capture parameter to the input file  like this     lt input type  file  accept  image    capture gt

User · Answer

I know this is an old question but I came across it while trying to solve this same issue  I thought it d be worth sharing this solution I hadn t found anywhere else   Basically the solution is to use CSS to hide the  lt input gt  element and style a  lt label gt  around it to look like a button  Click the  Run code snippet  button to see the results   I had used a JavaScript solution before that worked fine too but it is nice to solve a  presentation  issue with just CSS    x000D   x000D  label cameraButton   x000D    display  inline-block  x000D    margin  1em 0  x000D   x000D       Styles to make it look like a button    x000D    padding  0 5em  x000D    border  2px solid  666  x000D    border-color   EEE  CCC  CCC  EEE  x000D    background-color   DDD  x000D    x000D   x000D     Look like a clicked depressed button    x000D  label cameraButton active   x000D    border-color   CCC  EEE  EEE  CCC  x000D    x000D   x000D     This is the part that actually hides the  Choose file  text box for camera inputs    x000D  label cameraButton input accept   camera     x000D    display  none  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Nice image capture button lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt label class  cameraButton  gt Take a picture x000D       lt input type  file  accept  image   capture camera  gt  x000D     lt  label gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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     lt form id  form1  runat  server  gt       lt input type  file  id  imgInp    gt       lt img id  blah  src     alt  your image    gt   lt  form gt    Javascript   function readURL input        if  input files  amp  amp  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

User · Answer

You can trigger a file input element by sending it a Javascript click event  e g    lt input type  file      id  file-input  gt       file-input   click      You could put this in a click event handler for the image  for instance  then hide the file input with CSS  It ll still work even if it s invisible   Once you ve got that part working  you can set a change event handler on the input element to see when the user puts a file into it  This event handler can create a temporary  blob  URL for the image by using window URL createObjectURL  e g    var file   document getElementById  file-input   files 0   var blob url   window URL createObjectURL file     That URL can be set as the src for an image on the page   It only works on that page  though  Don t try to save it anywhere    Note that not all browsers currently support camera capture   In fact  most desktop browsers don t   Make sure your interface still makes sense if the user gets asked to pick a file

[php] html5 <input type="file" accept="image/*" capture="camera"> display as image rather than "choose file" button

Examples related to php

Examples related to html