how to images auto arrange in three different sizes?

[vijayram]

Hi,

i created fileuploader using php and jquery.user one click same time upload 20 images.
i need each 3 images automatically arrange in 3 different sizes.first image width:120,
2 image width:192,and 3 one is 280.

all the uplaoded images grouping 3 images.

This is the my index page code.

anybody plz give me a idea.

<div id="upload_button" >Upload File</div><span id="status_message" ></span> 
 <!--List Files--> 
<?php $i=0; ?>
<div id='image_container' class='planspace-image' >

 <?php if($i !=0 && $i %3 ===0): ?>
 <?php endif; ?>
<div id ="container_upload" style="float:left;width:1000px;height:600px; border: 1px solid #000">

<img class='upload_pic' style="width:140px; height:140px;" src= "<?php echo sfConfig::get('app_planspace_rootdir') ?>" border='0' />
</div>
<?php $i++ ;?>



</div>


<script type="text/javascript">




var upload_url = '<?php print url_for("@meetnewpeople_upload", true); ?>';
var crop_url = '<?php print url_for("@meetnewpeople_crop", true); ?>';
var too_path = '<?php print sfConfig::get('app_planspace_mainpath')?>';
//var uploadFilePath = '<?php print sfConfig::get('app_planspace_rootdir') ?>'; 
</script>