Question

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

Answer 1

首先，您必须了解PDF，Word文档，MP3，视频等文档的缩略图都没有。这意味着您必须自己创建这些缩略图。

其次，要为任何上传的图像添加缩略图，您需要显式创建同一图像的已调整大小的缩略图版本。否则，将上传的文件移动到服务器只会移动原始文件：原样而不调整其大小。

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

最后;如果您想要即时反馈（上传文档的缩略图显示），您可能不得不求助于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 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 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" />

用于我们预览缩略图的图像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>

这就是全部：

如何在php

4 个答案: