New HTML Tricks for Web Developers in Apple’s iOS 6
Apple’s recent iOS 6 update added some nice new web standards support to Mobile Safari, the default iOS web browser for the iPhone, iPad and iPod touch.
Apple’s documentation remains sparse and occasionally outdated, but luckily Max Firtman, author of O’Reilly’s Programming the Mobile Web, has a very thorough rundown of everything that’s new in iOS for web developers.
By far the biggest news is support for file uploads and camera access using a combination of the File API and the HTML Media Capture API. To let users take a picture from your web app, you’d use a file input tag something like this:
<input type="file" accept="image/*" capture="camera">
Mobile Safari’s Media Capture support is incomplete so it will ignore the
capture attribute, as well as any value for
accept other than
video, but at least web apps can now capture and upload images from the iPhone’s camera.
I put together a quick demo page of Mobile Safari’s Media Capture support so you can see the new interface in action. The first two examples on that page work, the third
audio example does not. You can see in the demo that Mobile Safari helpfully shows a thumbnail of the image prior to upload. It’s also worth noting that Mobile Safari supports the
multiple boolean flag for uploading more than one image at a time, though in that case you lose the ability to access the camera.
For more on what to do with those images once the user has selected them, check out the Mozilla developer network, which has an excellent tutorial on using the File API.