Javascript/PHP: upload resized images first, large files later

Question

I'm writing this design application where the user needs to upload images. It would be great if the client-side could upload thumbnails of the images first, allowing the user to get working before the real images have been uploaded. (They are only needed later, when exporting the design.)

I've looked briefly at a few packages which allow resizing, but they seem to upload the thumbnails and the images simultaneously, thus preventing the user from having the thumbnails available quickly.

Is it even possible to create a file upload so that resized images are uploaded first, then the real (fullsize) images?

Thanks, --Kjell

There are a few ideas: http://stackoverflow.com/questions/2434458/image-resizing-client-side-with-javascript-before-upload-to-the-server — Lajos Veres, Dec 26 '13 at 10:37
Since the same user needs to work with the thumbnail, Why do you need to upload it first?. You can store it locally while the user is working on it.. — Manquer, Dec 26 '13 at 10:45
When the thumbnails have been uploaded, they are used to create preview images (using PHP scripts) of the design. When the real images are available, the design can be exported in full resolution. — Kjell Post, Dec 26 '13 at 16:14

score 0 · Answer 1 · answered Dec 26 '13 at 11:12

Try this:

$pathToThumbs = "path/to/thumbs";

$new_fname = "thumb-file-name";
$img = imagecreatefromjpeg( imagecreatefromjpeg($_FILES['uploaded_file']['tmp_name']) );

$width = imagesx( $img );
$height = imagesy( $img );
$thumbWidth = //someValue//;
$thumbHeight = //someValue//;
$new_height = floor($height * ($thumbWidth/$width));
$new_width = $thumbWidth;
$tmp_img = imagecreatetruecolor($thumbWidth, $thumbHeight);
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width,$new_height, $width, $height );

move_uploaded_file( $tmp_img, "{$pathToThumbs}{$new_fname}" );

Thanks, but again this seems to be resizing on the server-side. — Kjell Post, Dec 26 '13 at 16:12

score 0 · Answer 2 · answered Dec 26 '13 at 12:10

0

Try this:

Image upload and crop

http://wsnippets.com/fancy-profile-image-upload-crop-jquery-ajax-php/

answered Dec 26 '13 at 12:10

user2943773

254
1
4
10

Thanks, had a brief look at the code and it seems to do the resizing on the server side (?) – Kjell Post Dec 26 '13 at 16:11

Javascript/PHP: upload resized images first, large files later

2 Answers2