如何在php中获得上传文档的缩略图


How to get a thumbnail of an uploaded document in php

我想在文件上传按钮所在的同一页面上显示上传的图像/文档的缩略图。请帮助我,我是一个业余编码员,谢谢。

这很有帮助。

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);
    }}        

祝你玩得愉快

首先,你必须明白,对于PDF、Word文档、MP3、视频等文档,没有缩略图这样的东西。这意味着你必须自己创建这些缩略图。

其次,要为任何上传的图像创建缩略图,您需要显式地创建相同图像的缩放缩略图版本。否则,将上传的文件移动到服务器只是将原始文件:原样移动,而不调整其大小。

如果你没有使用任何框架或你没有访问图像处理库在你的代码库,你可能想检查:WideImage。要通过Composer将WideImage包含在项目中,请尝试此链接。这将帮助您调整上载文件的大小。还有其他的;你可能只需要自己做一点研究....

最后;如果你想要一个即时反馈(上传文档的缩略图显示),你可能不得不求助于AJAX。这具有执行异步操作的优势,这意味着:你可以上传文档,一旦上传完成;缩略图立即出现在您的页面上。

如果你不太了解AJAX,那么你可能需要访问这个AJAX教程网站

jQUERY代码:

$(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+")");
            }
        }
    });
});

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

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>

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>

上面的jQuery工作在onChange事件的文件上传字段和添加图像的背景给div。

HTML:

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

用于预览缩略图的图像div的CSS: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>

: