From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Pingback: Tweets that mention jQuery Image Cropper with Uploader | Codrops -- Topsy.com
Pingback: uberVU - social comments
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
Pingback: URL Image Getter/Uploader/Resizer | Codrops
Pingback: 20 Plugins para jQuery | Renan Lima
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.
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
how ??? combine with data base mysql??
how to insert file ext to data base mysql????
thank u
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.
😮 (
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
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.
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.
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
Work fine on my server though. But would like to develop it locally…
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
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.
update – you should get the latest version of the class.upload.php here http://www.verot.net/php_class_upload.htm and replace it in the script.
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)
about class.upload.php – the author made some changes related to jCrop so better not to update the class
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
hey, its me again. another issue i have just noticed is that it doesnt seem to actually crop the images rather than to just resize them to fit the sqaures.
Sorry, but I tried all of your solutions but it still does not work
When the upload proceded, it haven’t got crop…
Hi,
Its not working in firefox.
I am not getting the upload button in your demo url even in firefox.
And in demo image i upload is not getting save .
I have firefox 3.6.17
Hi, thanks for this great script, is there a way to upload more images while creating the thumbnails as well?
Hey man, for some reason I can’t get the images to crop, it acts like it doesn’t see the selected area?
Any ideas? Thanks man
Exactly what I need. But I want to use a different image ratio like 150px wide by 100px wide. I want the preview and the dotted line selector guide to be the same aspect ratio? But no matter what I change, the selector guide wants to be square??? Thanks!
Hi ! Thanks for this great script !! How to resize the image proportionally? thanks !
Hi ! I’ve found how to resize the image proportionnaly :
$handle->image_resize = true;
$handle->image_ratio_x = true;
$handle->image_y = ($handle->image_src_y image_src_y:600;
But now, how can i insert the picture name in database ? Please i need help !! Thx a lot
Sorry ! Corrected an error in my prvious code :
$handle->image_y = ($handle->image_src_y image_src_y:600;
Great Image cropper. It worked well on local as well as remote host.
Hi,
I have the web application that requires 4 files of same image to be uploaded into 4 different folders, each time cropping same uploaded image, but to different dimensions.
I am not able to do changes to the source code to suits my requirements.
Please can any one help me.
hi
i can confirm the resize of the cropped image is not proportionally.
changed in crop.php
$handle->image_x = 140;
$handle->image_y = 180:
the created image is stretched.
could you be that kind to reply … thx
Hey, thanks so much for the great script.
Besides, thanks for Antonio advice, must download the latest class.upload.php and replaced the original one, everything goes fine now.
Hello can anybody tell me what must i do .
everyone when upload a image is only one picture in destinaten call Picture.jpg
what must i change for upload image
Any ideas why it stucks at 100% uploading when trying to upload .gif images ?
I managed to overcome any other obstacles but not this one yet.
It does fine with png and jpg files.
I tried this ‘fileExt’ : ‘*.jpg;*.gif;*.png’,
which seemed to work for all three except that gifs stuck at 100% upload.
I am pretty new to coding and would like to know how I can save these images to a folder on my server and add them to a mysql db.
I am a beginner in php. can anybody tell me how can I use this plugin in aspx pages?