jQuery Image Cropper with Uploader

Please check the updated version here! Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script. The idea is that the user uploads a picture,  selects which area […]
jquery_cropper

From our monthly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Please check the updated version here!

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.

see the DEMO
download the source code here
Please check the updated version here!

Tagged with:

chadking

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

http://tympanus.net/codrops/author/chadking/

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 40

Comments are closed.
  1. Pingback: Tweets that mention jQuery Image Cropper with Uploader | Codrops -- Topsy.com

  2. Pingback: uberVU - social comments

  3. it’s sound great! a lovely features like gravatar, facebook, etc… thanks for share !!
    It could be nice if wordress add this build-in feature in next versions !

    adeux

  4. Pingback: URL Image Getter/Uploader/Resizer | Codrops

  5. Pingback: 20 Plugins para jQuery | Renan Lima

  6. Uploaded this to my domain and could not get it to work at all. I can upload an image fine but jcrop never appears so i can crop the image. Any ideas what i could do to get this working cos I love it and need it.

  7. To continue my last comment, i tried a basic alert(‘hello’); on uploadify onComplete function and it doesn’t work. Please help…

    • Hi Carlos!
      I have tested it on my local machine and it seems to work fine. I have read some other comments that it doesn’t work, but I am not sure what exactly is causing that problem, since it’s working for me either on my local machine or here at Codrops. The only reason I could think of, is the size of the image you are uploading. Try to upload some small image first. You can set a different limit in the script afterwards.
      Let me know your results. I will try to find out what the problem might be.
      Regards

  8. how ??? combine with data base mysql??

    how to insert file ext to data base mysql????

    thank u

  9. I love the demo! It looks like it works great. But, in the download code version there seems to be something wrong somewhere… I have exactly the same problem as Carlos. It’s definitely not a file size issue. A 50kb image uploads seemingly fine. But on completion the image fails to appear in firefox, chrome, or ie. IE give a javascript error: ‘null’ is null or not an object. I tried the newer v1.1 with exactly the same issue.
    😮 (

  10. one possible something…

    the jquery.uploadify.v2.1.0.js file makes reference to php file: uploadify.php

    “script : ‘uploadify.php’, // The path to the uploadify backend upload script”

    but that file is not included in the zip file

    • Hi dakine,
      the uploadify.php mentioned in the jquery.uploadify.v2.1.0.js is the default value. In the index file, it’s set as upload.php, so it will be overwritten.
      Could you try checking the permissions of the photos folder? That could be one of the causes… BTW, where are you using this? On your server? Locally? In the root folder?
      Cheers

  11. Hi,
    Thanks for the quick reply!
    The files are uploaded to a server. All folders have been set to full 777 access.
    It actually DOES upload the file (sort of) but it never appears as in the demo. But if you f5 after the error then the small starting thumbnail photo over the upload button has changed to whatever image was last attempted to upload. It’s like the upload goes fine and then when it hits ‘complete’ something in that next step fails.

  12. AHA….

    Found it.

    Thanks again for you quick reply earlier Cody. The server I usually use runs php5, this one I’m on at the moment is running php4. That’s the issue!

    Changed htaccess file to force php5 rendering and all is happy now!!

    D.

  13. Im running PHP 5, folders permissions are ok.

    Can’t get running on my localhost. It tries to upload the file, the progress bar appears, completes and goes away (super quickly). But the crop window doesn’t appear.

    Both v1 and v1.1 won’t work

  14. Hello,

    Thank you for this script.

    Is it possible to replace the flash button with an input ?

    The flash button is only visible on Internet Explorer.

    I’m french, I’m sorry for my english.

    Thank you

  15. I found the problem that most of you reported. It’s the upload.class – it has some errors, of functions that are deprecated.
    If you add error_reporting(0) to the class.upload.php it will work perfectly.

  16. If you are having trouble with the script not saving the image after cropped, check the values in crop.php that define the location of the images. The default is in the root/crop but if your script is in a different location you need to change these values (total 3)

  17. about class.upload.php – the author made some changes related to jCrop so better not to update the class

  18. hey, let me just say great script. only issue i have with it is when i try to upload a file which is too big, it alerts and says error like it should, but then crashes firefox so nothing works at all and you have to physically end process to close it. Hope this can be sorted would love to use you code in my site.

    Nate