PHP 에코 업로드 파일 두 번

Question

나는이 PHP, AJAX, 라이브 제출시 파일을 업로드하고 이미지를 표시하는 jQuery 업로드 스크립트가 있습니다. 아래 코드를 각각 붙여 넣습니다. 내 문제는 이미지를 표시 한 다음 이미지의 소스 코드를 표시하려는 것입니다. 예를 들어 :

이가
(나는이 웹 사이트에 (10)의 명성을 필요로하기 때문에 실제 이미지를 업로드 할 수 없습니다) 이미지의 사진

<img src="tick.png" width="40" /> 

그래서 스크립트가 표시입니다 이미지 아래에 이미지의 코드도 표시됩니다. 제발 누군가가이 문제에 대해 저를 도울 수있어서 정말 감사 할 것입니다! 모든 솔루션은 내가 솔루션에 기록 된 어떤 언어 괜찮다 환영합니다.

HTML 코드

<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm"> 
<table width="500" border="0"> 
    <tr> 
    <td>File : </td> 
    <td><input name="ImageFile" type="file" /></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td><input type="submit" id="SubmitButton" value="Upload" /></td> 
    </tr> 
</table> 
</form> 

아약스 코드

$(document).ready(function() { 
     //elements 
     var progressbox  = $('#progressbox'); 
     var progressbar  = $('#progressbar'); 
     var statustxt  = $('#statustxt'); 
     var submitbutton = $("#SubmitButton"); 
     var myform   = $("#UploadForm"); 
     var output   = $("#ImageOutput"); 
     var outputTwo  = $("#ImageCopy"); 
     var completed  = '0%'; 

       $(myform).ajaxForm({ 
        beforeSend: function() { //brfore sending form 
         submitbutton.attr('disabled', ''); // disable upload button 
         statustxt.empty(); 
         progressbox.slideDown(); //show progressbar 
         progressbar.width(completed); //initial value 0% of progressbar 
         statustxt.html(completed); //set status text 
         statustxt.css('color','#000'); //initial color of status text 
        }, 
        uploadProgress: function(event, position, total, percentComplete) { //on progress 
         progressbar.width(percentComplete + '%') //update progressbar percent complete 
         statustxt.html(percentComplete + '%'); //update status text 
         if(percentComplete>50) 
          { 
           statustxt.css('color','#fff'); //change status text to white after 50% 
          } 
         }, 
        complete: function(response) { // on complete 
         output.html(response.responseText); //update element with received data 
         outputTwo.html(response.responseText); //update element with received data 
         myform.resetForm(); // reset form 
         submitbutton.removeAttr('disabled'); //enable submit button 
         progressbox.slideUp(); // hide progressbar 
        }, 
      }); 
     }); 

PHP 코드 (processupload. PHP)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<?php 
//ini_set('display_errors', 1); 
//error_reporting(E_ALL); 

if(isset($_POST)) 
{ 
    //Some Settings 
    $BigImageMaxSize  = 300; //Image Maximum height or width 
    $DestinationDirectory = 'uploads/'; //Upload Directory ends with/(slash) 
    $Quality    = 80; 

    // check $_FILES['ImageFile'] array is not empty 
    // "is_uploaded_file" Tells whether the file was uploaded via HTTP POST 
    if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name'])) 
    { 
      die('Something went wrong with Upload!'); // output error when above checks fail. 
    } 

    // Random number for both file, will be added after image name 
    $RandomNumber = rand(0, 9999999999); 

    // Elements (values) of $_FILES['ImageFile'] array 
    //let's access these values by using their index position 
    $ImageName  = str_replace(' ','-',strtolower($_FILES['ImageFile']['name'])); 
    $ImageSize  = $_FILES['ImageFile']['size']; // Obtain original image size 
    $TempSrc  = $_FILES['ImageFile']['tmp_name']; // Tmp name of image file stored in PHP tmp folder 
    $ImageType  = $_FILES['ImageFile']['type']; //Obtain file type, returns "image/png", image/jpeg, text/plain etc. 

    //Let's use $ImageType variable to check wheather uploaded file is supported. 
    //We use PHP SWITCH statement to check valid image format, PHP SWITCH is similar to IF/ELSE statements 
    //suitable if we want to compare the a variable with many different values 




    switch(strtolower($ImageType)) 
    { 
     case 'image/png': 
      $CreatedImage = imagecreatefrompng($_FILES['ImageFile']['tmp_name']); 
      break; 
     case 'image/gif': 
      $CreatedImage = imagecreatefromgif($_FILES['ImageFile']['tmp_name']); 
      break; 
     case 'image/jpeg': 
     case 'image/pjpeg': 
     case 'image/jpg': 
      $CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']); 
    } 



    //PHP getimagesize() function returns height-width from image file stored in PHP tmp folder. 
    //Let's get first two values from image, width and height. list assign values to $CurWidth,$CurHeight 
    list($CurWidth,$CurHeight)=getimagesize($TempSrc); 
    //Get file extension from Image name, this will be re-added after random name 
    $ImageExt = substr($ImageName, strrpos($ImageName, '.')); 
    $ImageExt = str_replace('.','',$ImageExt); 


    //remove extension from filename 
    $ImageName  = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName); 

    //Construct a new image name (with random number added) for our new image. 
    $NewImageName = 'IMG-'.$RandomNumber.'.'.$ImageExt; 
    //set the Destination Image 
    $DestRandImageName   = $DestinationDirectory.$NewImageName; //Name for Big Image 

    //Resize image to our Specified Size by calling resizeImage function. 
    if(resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType)) 
    { 






     /* 
     At this point we have succesfully resized and created thumbnail image 
     We can render image to user's browser or store information in the database 
     For demo, we are going to output results on browser. 
     */ 

     //Get New Image Size 
     list($ResizedWidth,$ResizedHeight)=getimagesize($DestRandImageName); 

     $ImageURL = '<img src="uploads/'.$NewImageName.'" height="'.$ResizedHeight.'" width="'.$ResizedWidth.'">'; 

     echo $ImageURL; 




    }else{ 
     die('Resize Error'); //output error 
    } 



} 
// This function will proportionally resize image 
function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType) 
{ 
    //Check Image size is not 0 
    if($CurWidth <= 0 || $CurHeight <= 0) 
    { 
     return false; 
    } 
    //Construct a proportional size of new image 
    $ImageScale   = min($MaxSize/$CurWidth, $MaxSize/$CurHeight); 
    $NewWidth   = ceil($ImageScale*$CurWidth); 
    $NewHeight   = ceil($ImageScale*$CurHeight); 

    if($CurWidth < $NewWidth || $CurHeight < $NewHeight) 
    { 
     $NewWidth = $CurWidth; 
     $NewHeight = $CurHeight; 
    } 
    $NewCanves = imagecreatetruecolor($NewWidth, $NewHeight); 
    // Resize Image 
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight)) 
    { 
     switch(strtolower($ImageType)) 
     { 
      case 'image/png': 
       imagepng($NewCanves,$DestFolder); 
       break; 
      case 'image/gif': 
       imagegif($NewCanves,$DestFolder); 
       break; 
      case 'image/jpeg': 
      case 'image/pjpeg': 
       imagejpeg($NewCanves,$DestFolder,$Quality); 
       break; 
      default: 
       return false; 
     } 
    //Destroy image, frees up memory 
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
    return true; 
    } 
} 
//This function corps image to create exact square images, no matter what its original size! 
function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType) 
{ 
    //Check Image size is not 0 
    if($CurWidth <= 0 || $CurHeight <= 0) 
    { 
     return false; 
    } 

    //abeautifulsite.net has excellent article about "Cropping an Image to Make Square" 
    //http://www.abeautifulsite.net/blog/2009/08/cropping-an-image-to-make-square-thumbnails-in-php/ 
    if($CurWidth>$CurHeight) 
    { 
     $y_offset = 0; 
     $x_offset = ($CurWidth - $CurHeight)/2; 
     $square_size = $CurWidth - ($x_offset * 2); 
    }else{ 
     $x_offset = 0; 
     $y_offset = ($CurHeight - $CurWidth)/2; 
     $square_size = $CurHeight - ($y_offset * 2); 
    } 

    $NewCanves = imagecreatetruecolor($iSize, $iSize); 
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize,  $iSize, $square_size, $square_size)) 
    { 
     switch(strtolower($ImageType)) 
     { 
      case 'image/png': 
       imagepng($NewCanves,$DestFolder); 
       break; 
      case 'image/gif': 
       imagegif($NewCanves,$DestFolder); 
       break; 
      case 'image/jpeg': 
      case 'image/pjpeg': 
       imagejpeg($NewCanves,$DestFolder,$Quality); 
       break; 
      default: 
       return false; 
     } 
    //Destroy image, frees up memory 
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
    return true; 

    } 
} 

?> 

Answer 1

당신은 당신의 PHP를 htmlentities() 예를 들어 기능 사용해야 이미지 링크에 HTML 소스 코드를 표시하려면 :

echo htmlentities('<img src="pathtoimage/img.jpg" />'); 
echo htmlentities('<img src="pathtoimage/img.jpg" />',ENT_COMPAT); 
echo htmlentities('<img src="pathtoimage/img.jpg" />',ENT_COMPAT,'utf-8'); 

결과는 다음과 같습니다

<img src="sourcetoimage/img.jpg" /> 

없는 이미지보기

을

Answer 2

JQ에서 html을 인코딩하려면 다음을 사용할 수 있습니다.

$('object').text(value).html(); 

디코딩하려면

$('object').html(value).text();