• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 156
  • Last Modified:

how to resize preview image

While I try and find the perfect solution, I am using a super simple upload script just to get me going so I don't get held up.

The form:

<!doctype html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <title>Easy Ajax Image Upload with jQuery and PHP</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
 <script type="text/javascript" src="js/jquery-1.11.3-jquery.min.js"></script>
 <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
 <h1><a href="">Easy Ajax Image Upload with jQuery</a></h1>
 <hr> 
 <div id="preview"><img src="no-image.jpg" /></div>
    
 <form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
 </form>
    <div id="err"></div>
</div>
</body>
</html>

Open in new window


ajaxupload.php

<?php

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory

if(isset($_FILES['image']))
{
 $img = $_FILES['image']['name'];
 $tmp = $_FILES['image']['tmp_name'];
  
 // get uploaded file's extension
 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
 
 // can upload same image using rand function
 $final_image = rand(1000,1000000).$img;
 
 // check's valid format
 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 
   
  if(move_uploaded_file($tmp,$path)) 
  {
   echo "<img src='$path' />";
  }
 } 
 else 
 {
  echo 'invalid file';
 }
}

?>

Open in new window


script.js

$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
         url: "ajaxupload.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid file')
    {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

Open in new window


This works so far. It uploads an image to the specified folder and shows the image straight away after upload. The issue is that if I upload a large image, like 800x600 or bigger, that is how big it displays! It's huge. I just want it to show a thumbnail. Is there an easy way to do this?
0
Black Sulfur
Asked:
Black Sulfur
  • 2
2 Solutions
 
Ray PaseurCommented:
The easiest way would probably be to set the height and width attributes of the thumbnail with CSS.
http://www.w3schools.com/css/css_dimension.asp
1
 
leakim971PluritechnicianCommented:
your php line 24 : echo "<img src='$path' width='64' />";

use only width or height to preserve aspect ratio.
0
 
Ray PaseurCommented:
Sigh... Inline explicit width attributes are so 1999!
0
 
Black SulfurAuthor Commented:
Haha, sorry. I didn't know! It just seemed ridiculously quicker and simpler.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now