I have a button which uploads a background image to a folder and saves the file name to the database, but I cant figure how to re size the image before uploading it. Actually I am facing two problems. 1 - How to resize the image and upload it. 2 - How to display the image as background image for a div which is having a different dimension.

What I have done till now :

Html

<div class="image_load_div">
 <form id="imageform" enctype="multipart/form-data" method="post" action="upload.php">
   <input name="photoimg" id="photoimg" type="file"/>
 </form>
</div>

javascript

$("#imageform").ajaxForm().submit(); 

php- upload file

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
   name = $_FILES['photoimg']['name'];
   $size = $_FILES['photoimg']['size'];
   if(strlen($name)) {
 list($txt, $ext) = explode(".", $name);
 if(in_array($ext,$valid_formats)) {
   if($size<(1024*1024)) {
          session_start();
      $id = $_SESSION['QuestionId'];
      $path = "/images/Img/".$id."_bg.".$ext;

          if( move_uploaded_file($_FILES["photoimg"]["tmp_name"],$path) ) {
             // Save the file name into database
          }
        else { echo "<script>alert('Upload failed');</script>"; }
   else { echo "<script>alert('Image file size max 1 MB');</script>"; }                 
    else {  echo "<script>alert('Invalid file format..');</script>"; }  
 else { echo "<script>alert('Please select image..!');</script>";   exit; }

I would like to save the image as height:408px; width:490px; and when displaying the image I want to display this image width:174px; height:108px; IMP !During uploading and when displaying, need to consider the aspect ratio;
for now uploading is working.

please help me to solve this. Thanks.

Member Avatar for LastMitch

@ckjaseem

I would like to save the image as height:408px; width:490px; and when displaying the image I want to display this image width:174px; height:108px; IMP !During uploading and when displaying, need to consider the aspect ratio;

I don't see any code you provided that has a resize image code in it. You need to add one

This is the closest one code that is related to resized:

if($size<(1024*1024)) {

If you didn't write this code most likely you have to change it from there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.