So erhalten Sie ein Miniaturbild eines hochgeladenen Dokuments in php

Question

Ich möchte ein Miniaturbild des hochgeladenen Bilds/Dokuments auf der gleichen Seite anzeigen, auf der der Datei-Upload-Button vorhanden ist. Bitte helfen Sie mir dabei Ich bin ein Amateur-Coder, Danke.

Answer 1

Zunächst müssen Sie verstehen, dass es für Dokumente wie PDF, Word-Dokument, MP3, Video usw. keine Thumbnails gibt. Das bedeutet, dass Sie diese Thumbnails selbst erstellen müssen.

Zweitens, um ein Thumbnail für jedes hochgeladene Bild zu haben, müssen Sie explizit eine Miniaturansicht desselben Bildes in der Größe erstellen. Wenn Sie die hochgeladene Datei auf den Server verschieben, wird die Originaldatei einfach verschoben: WIE IST, ohne die Größe zu ändern.

Wenn Sie kein Framework verwenden oder keinen Zugriff auf die Bildverarbeitungsbibliothek in Ihrer CodeBase haben, können Sie Folgendes ausprobieren: WideImage. So fügen Sie WideImage über Composer in Ihr Projekt ein: try this Link. Dies würde Ihnen bei der Größenanpassung Ihrer hochgeladenen Datei helfen. Es gibt auch andere; Sie müssen vielleicht nur ein wenig Nachforschungen anstellen ...

Endlich; Wenn Sie ein sofortiges Feedback (Thumbnail-Anzeige des hochgeladenen Dokuments) wünschen, müssen Sie möglicherweise auf AJAX zurückgreifen. Dies hat den Vorteil, Asynchronous Operations durchzuführen, dh Sie können das Dokument hochladen und den Upload durchführen. Das Thumbnail erscheint sofort auf Ihrer Seite.

Wenn Sie nicht viel über AJAX wissen, dann müssen Sie vielleicht AJAX Tutorial Website besuchen.

Answer 2

Nun, das wäre hilfreich.

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

Viel Spaß.

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> 

Oben jQuery Arbeiten onChange-Ereignis Ihres Datei-Upload-Feld und Bild hinzufügen im Hintergrund von geben div.

HTML:

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

CSS für Bild div verwendet, in denen wir Thumbnail-Vorschau: 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> 

Das ist alles: