アップロードされたドキュメントのサムネイルをPHPで入手する方法

Question

アップロードした画像/ドキュメントのサムネイル画像を、ファイルアップロードボタンが表示されているページと同じページに表示したいとします。 助けてください私はアマチュアコーダーです、ありがとう。

Answer 1

まず、PDF、Word文書、MP3、ビデオなどのドキュメントのサムネイルなどは存在しないことを理解しておく必要があります。つまり、自分でサムネイルを作成する必要があります。

第2に、アップロードされた画像のサムネイルを表示するには、同じ画像のサムネイルをサイズ変更して明示的に作成する必要があります。それ以外の場合は、アップロードされたファイルをサーバーに移動するだけで元のファイルが移動されます。そのままですサイズ変更せずに。

フレームワークを使用していない場合や、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 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コード

<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に使用

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

：