How to crop or re-size an image and then upload to a folder

[ckjaseem]

Hi all ,
I have googled for an answer for this question but most of them are so complicated. Can anyone suggest a simple article on this topic or show me step by step how to solve this.

I want to upload an image to a folder and show this image as a background for a <div>. I have managed to preview the image without uploading it to the folder (But it wont crop or re-size)
what I have done so far : -

"index.php"

<form id="imageform" enctype="multipart/form-data" method="post" action="upload.php"> 
    <input id="fileToUpload" type="file" name="fileToUpload"/> 
    <input type="submit" value="Upload Image" /> 
</form>

// preview the image here (width:620px,height:516px)
<div id="image_preview"></div> 

"index.js"

$("input[name='fileToUpload']").on("change", function(){
    var files = !!this.files ? this.files : [];
    if ( !files.length || !window.FileReader ) return;
    if ( /^image/.test( files[0].type ) ) {
    var reader = new FileReader();
    reader.readAsDataURL( files[0] );
    reader.onloadend = function(){
        $("#image_preview").css("background-image", "url(" + this.result + ")"); }
    }
});

"upload.php"
.......

[LastMitch]

@ckjaseem

I have googled for an answer for this question but most of them are so complicated. Can anyone suggest a simple article on this topic or show me step by step how to solve this.

The code you provide is 1/4 of a code. You need more than that.

Read and try this:

http://www.codeforest.net/how-to-crop-an-image-using-jquery-and-php

or you can just used PHP instead:

http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/

http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html