How to get a thumbnail of an uploaded document in php

Question

I want to display a thumbnail image of the uploaded image/document on the same page where the file-upload button is present. Please help me on it I'm an amateur coder,Thanks.

Answer 1

jQuery

<script type="text/javascript">
$(function() {
    $("#uploadFile").on("change", function()
    {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});
</script>

Above jQuery work on onChange event of your file upload field and add image in background of give div.

HTML:

<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />

CSS used for image div in which we preview thumbnail: CSS

<style>
#imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

That’s all:

Answer 2

jQUERY CODE:

$(function() {
    $("#uploadFile").on("change", function()
    {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});

HTML CODE

<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />

CSS STYLE:

    <style>
      #imagePreview {
        width: 180px;
        height: 180px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
}
</style>

Answer 3

First, you have to understand that there is no such thing as Thumbnail for Documents like PDF, Word Document, MP3, Video, etc. This means you have to create those Thumbnails yourself.

Secondly, to have a thumbnail for any uploaded image, you'd need to explicitly create resized, thumbnail version of the same image. Otherwise, moving the uploaded File to the Server simply moves the Original file: AS IS without resizing it.

If you are not using any Framework or you have no access to Image Processing Library in your CodeBase, You may want to check out: WideImage. To Include WideImage in your Project via Composer, try this Link. This would help you with Resizing your Uploaded File. There are also others; You may just have to do a little research on your own....

Finally; if you want an Instant Feedback (Thumbnail Display of the Uploaded Document), You may have to resort to AJAX. This has the Advantage of performing Asynchronous Operations, which means: You can upload the Document and once the Upload is done; the Thumbnail instantly appears on your Page.

If you don't know much about AJAX, then you may need to pay visit to this AJAX Tutorial Website.

Answer 4

well, this would be helpful.

define ("MAX_SIZE","4000");
function getExtension($str) {
     $i = strrpos($str,".");
     if (!$i) { return ""; }
     $l = strlen($str) - $i;
     $ext = substr($str,$i+1,$l);
     return $ext;
  }

 $errors=0;


$image =$_FILES["upload_field_name"]["name"];
$uploadedfile = $_FILES['upload_field_name']['tmp_name'];


if ($image) 
{

    $filename = stripslashes($_FILES['upload_field_name']['name']);

    $extension = getExtension($filename);
    $extension = strtolower($extension);


   if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
    {

        echo"<script>alert('Unknown Image extension');</script>";
        die;
        $errors=1;
    }
    else
    {

   $size=filesize($_FILES['upload_field_name']['tmp_name']);


  if ($size > MAX_SIZE*1024)
  {
    echo"<script>alert('You have exceeded the size limit!');</script>";
  die;
  $errors=1;
}


 if($extension=="jpg" || $extension=="jpeg" )
{
  $uploadedfile = $_FILES['upload_field_name']['tmp_name'];
  $src = imagecreatefromjpeg($uploadedfile);

}
    else if($extension=="png")
    {
            $uploadedfile = $_FILES['upload_field_name']['tmp_name'];
             $src = imagecreatefrompng($uploadedfile);

     }
  else 
 {
 $src = imagecreatefromgif($uploadedfile);
  }



 list($width,$height)=getimagesize($uploadedfile);


 $newwidth=60;
 $newheight=($height/$width)*$newwidth;
 $tmp=imagecreatetruecolor($newwidth,$newheight);


 $newwidth1=30;
 $newheight1=($height/$width)*$newwidth1;
 $tmp1=imagecreatetruecolor($newwidth1,$newheight1);

 imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

                  imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1,$width,$height);
    $obj = mysql_fetch_object(mysql_query("SELECT MAX(id) as kk FROM your_table_name"));
    $i = $obj->kk;
    $i = $i+1;
    $newname = 'dp'.$i.'.jpg';
   rename($_FILES['upload_field_name']['name'], $newname);


   $filename = "folder_name/".$newname;

   $filename1 = "folder_name/small".$newname;



   imagejpeg($tmp,$filename,100);

    imagejpeg($tmp1,$filename1,100);

    imagedestroy($src);
    imagedestroy($tmp);
    imagedestroy($tmp1);
    }}        

Have a good time.