Jump to content

File Upload - Image Resize and Saves in Image Folder


jillianmarie

Recommended Posts

Hey all, hoping to get this code solved.

 

I am building an image gallery for a client's website and wanted a way for the client to upload their own images from the back end and shows up on the website page for the pictures. I am using color box as the lightbox feature for the photos and on the webpage thumbnails are displayed in rows.

 

In the backend, I have the upload page and here is my form:

 

 

<form name="form" action="../uploader.php" method="POST"
enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="uploaded_file" id="uploaded_file">
    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" /><br />
    <input type="hidden" name="image_type" value="" /><br />
    
<input type="submit" name="submit" value="Submit">
<input type="hidden" name="MM_insert" value="form" />
</form>
 

From the admin upload page, the client can upload their image and it will save it into the "image/uploads/" folder. Here is the uploader.php script:

 

 

<?php
    
//Сheck that we have a file
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 1.4MB
  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
 
  if (($ext == "jpg") && ($_FILES["uploaded_file"]["type"] == "image/jpeg") &&
    ($_FILES["uploaded_file"]["size"] < 10485760))
    {
    
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/images/uploads/'.$filename;
      //Check if the file with the same name is already exists on the server
    
      
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "Upload Complete! ";
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["uploaded_file"]["name"]." already exists";
      }
  } else {
     echo "Error: File too big to upload";
  }
} else {
 echo "Error: No file uploaded";
}


?>
 

Now the website page will display all the images in the "images/uploads" folder and will update itself when new photos are uploaded.

 

Here is the gallery code from the website:

 

<div class="gallery">

 <?php
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
  $files = array();
  if($handle = opendir($images_dir)) {
    while(false !== ($file = readdir($handle))) {
      $extension = strtolower(get_file_extension($file));
      if($extension && in_array($extension,$exts)) {
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  return $files;
}

/* function: returns a file's extension */
function get_file_extension($file_name) {
  return substr(strrchr($file_name,'.'),1);
}

/** settings **/
$images_dir = 'images/uploads/';
$images_per_row = 5;

/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
  $index = 0;
  foreach($image_files as $index=>$file) {
    $index++;
    echo '<a href="',$images_dir.$file,'" class="photo-link group1" rel="uploads"><img src="timthumb.php?src=',$images_dir.$file,'&h=150&w=150" /></a>';
    if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
  }
  echo '<div class="clear"></div>';
}
else {
  echo '<p>There are no images in this gallery.</p>';
}

 ?>


</div>
 

With the help from timthumb.php and timthumb-config.php I am able to produce the thumbnails for the website. Once clicked, brings up the colorbox feature for the image slideshow.

 

For some reason, this code only can use image sizes under 1500px. How can I upload a bigger image and resize it to save itself into the "images/uploads/" folder to be under 1500px?

 

Please look at my codes and let me know where and what code I need to produce the resized image.

 

 

Thanks! :)

 

Link to comment
Share on other sites

@Jazzman, you have no clue what you're talking about.

 

@Jillianmarie, you want to look into getimagesize and use it on the uploaded image to check its dimensions, then if the image is too large, you will need to re-size it. You can Google some tutorials on how to do the re-sizing, and the come back if you get stuck with it.

Link to comment
Share on other sites

"How can I upload a bigger image and resize it" - Take note of the red text.

 

Yes, because he doesn't understand how php works, the same like you (I don't be rude)

 

Don't forget - php is a server side language and need to follow the rules of the server before doing anything with javascript. 

Link to comment
Share on other sites

I think you'll find I do understand PHP, you just don't understand English fully.

 

He first has to upload the image, via a form (He doesn't have a problem with this, otherwise he'd have said so)

Secondly, he wants to re-size any image that is above 1,500px, so it will work with his image slideshow (This is where he is stuck)

 

You also don't understand JavaScript, you can't re-size an image using JavaScript. You can make it look smaller, but you can't physically change it's dimensions.

You need to use PHP to find the ratio of how to scale the image, then save the image in the correct dimensions (All done by PHP)

Edited by PaulRyan
Link to comment
Share on other sites

  • 2 months later...

You also don't understand JavaScript, you can't re-size an image using JavaScript. You can make it look smaller, but you can't physically change it's dimensions.

You need to use PHP to find the ratio of how to scale the image, then save the image in the correct dimensions (All done by PHP)

 

I beg to differ. Its now possible to re-size images client-side by using the new "canvas" element [1][2][3]. A completely new image! I tried it myself when playing around with HTML5. Moreover, PHP creates an entirely new image when you use GD; it doesn't manipulate the image stored on the file system as you appear to think, but instead manipulates a copy created from the actual image.

 

[1] Pascal Helfenstein. Resizing images with Javascript. http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html

[2] Mozilla.org. How to develop an HTML5 image uploader. http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

[3] Andrea Giammarchi. 100% Client Side Image Resizing. http://webreflection.blogspot.co.uk/2010/12/100-client-side-image-resizing.html

Edited by cpd
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.