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

Question

我想在上传图片/文档的同时显示文件上传按钮的页面上显示缩略图。 请帮我一下我是一个业余编码器，谢谢。

Answer 1

首先，您必须明白，不存在诸如PDF，Word文档，MP3，视频等文档的缩略图。这意味着您必须自己创建这些缩略图。其次，为了让任何上传的图片具有缩略图，您需要明确地创建相同图像的缩放版缩略图。否则，将上传的文件移动到服务器只需移动原始文件：无需调整其大小。

如果您没有使用任何Framework或者您无法访问CodeBase中的图像处理库，则可能需要检出：WideImage。通过Composer在您的项目中加入WideImage，try this Link。这将帮助您调整上传的文件大小。还有其他的;你可能只需要自己做一点研究......

最后;如果您需要即时反馈（上载文档的缩略图显示），您可能不得不求助于AJAX。这具有执行异步操作的优势，这意味着：您可以上传文档，并在上传完成后;缩略图即刻显示在您的页面上。

如果您对AJAX不太了解，那么您可能需要付费访问此AJAX Tutorial Website。

Answer 2

好吧，这会有所帮助。

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

玩得开心。

Answer 3

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

HTML代码

<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> 

Answer 4

的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" /> 

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> 

这就是：