Jump to content

Archived

This topic is now archived and is closed to further replies.

jillianmarie

File Upload - Image Resize and Saves in Image Folder

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! :)

 

Share this post


Link to post
Share on other sites

The server does not care about the px of the image only from file size.

 

Check that values in the php.ini file:

 

file_uploads = On

upload_max_filesize = 2048M

max_file_uploads = 2M

post_max_size = 2048M

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

 

Really?

 

What do you want to say me, that the server does care of the image dimensions?

Share this post


Link to post
Share on other sites

Yes really, you obviously didn't read the question properly.

He wants larger images to be re-sized to 1,500px or less to work in the image slideshow.

Share this post


Link to post
Share on other sites

 

He wants larger images to be re-sized to 1,500px or less to work in the image slideshow.

 

Yes, that's true.....but before to start that process the image has to be uploaded into the server.

Share this post


Link to post
Share on other sites

That is correct, but the OP didn't state an issue with the actual upload. He/she stated an issue with the image dimensions.

Share this post


Link to post
Share on other sites

Ok, you are English, so tell me how you understand that question?

 

How can I upload a bigger image and resize it to save itself into the "images/uploads/" folder to be under 1500px?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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. 

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

Less bitching at one another, more helping the OP.

Share this post


Link to post
Share on other sites

Kevin, you are right :)

 

Hey Paul, sorry buddy...my apologies.

Share this post


Link to post
Share on other sites

Less bitching at one another, more helping the OP.

 

Bitching? Where? :tease-03: Just a friendly debate. I gave the OP some advice on an earlier post I believe.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×
×
  • 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.