HTML5: take a photo and upload it from mobile phone browser
UPDATED on 2015-01-26 with Image Resize
Yesterday, a colleague asked me:
“Andy, I need to make a simple mobile application that takes a picture and sends it to my webserver. It’s too difficult?”
Obviously no, with a little bit of HTML5. ;-)
Let’s start making an HTML page with a simple form that permits the user to select or take a photo using the phone camera:
We use the attribute
“accept=”image/*”
to say to mobile browser to set the INPUT tag to accept images from camera roll or camera app, and some javascript to display a simple upload progress.
Server side, the PHP script is dramatically simple:
That’s all!
The complete source is available on my GIT repository.