Skip to content

HTML5 widget for uploading an image. The scaling and cropping is done client side. Scaled version of the image is uploaded to the server through AJAX call.

Notifications You must be signed in to change notification settings

johndeverall/HTML5ProfileImageUploader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 

Repository files navigation

HTML5 photo upload

Introduction

Drag 'n drop your photo (and leave the technical details to us)

HTML5 photo upload is a jQuery plugin to crop, scale and upload an image. It croppes the dropped or selected image at the predefined resolution and scales it down to fit automatically. For efficiency, cropping and scaling is performed on the browser side. The resulting image is uploaded to the server through an asynchronous call. This plugin exploits all of HTML5's possibilities, available in every modern browser.

Files are automatically uploaded as soon as they are added, no files are stored on the server.

Key features

  • Ease of use
  • Minimal interaction
  • Fast

Demo

http://sandbox.juurlink.org/html5imageuploader/

Blog

http://blog.avisi.nl/2013/02/13/html5-drag-n-drop-photo/

Compatibility

It has been successfully tested in the following browsers:

  • Chrome 19+
  • Safari 5.1+
  • Firefox 12+

Changes

Version 1.1 (2013-02-10)

  • Added iOS6 Safari support
  • Fixes iOS6 Safari's image file rendering issue for large size image
  • Aware of rotation info saved within JPEG (EXIF)

Version 1.0 (2012-05-27)

  • Initial release

About

HTML5 widget for uploading an image. The scaling and cropping is done client side. Scaled version of the image is uploaded to the server through AJAX call.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 87.3%
  • PHP 9.5%
  • CSS 3.2%