I have this PHP, AJAX, jQuery upload script that uploads a file on submit live and will display the image. I will paste the code for each below. My problem is that I want to display the image and then display the source code for the image. For example:
This is a picture of the image
(I cannot upload the actual image because I need a reputation of 10 on this website)
<img src="tick.png" width="40" />
So the script shows the image then below it it also shows the code for the image. Please can somebody help me with this problem I will be so grateful! Any solution is welcome I don't mind what language the solution is written in.
HTML Code
<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> </td>
<td><input type="submit" id="SubmitButton" value="Upload" /></td>
</tr>
</table>
</form>
Ajax Code
$(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 Code (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;
}
}
?>
If You want to display a html source code to image link You should use php htmlentities() function for example:
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');
result is:
<img src="sourcetoimage/img.jpg" />
not an image view
To encode html in JQ You can use:
$('object').text(value).html();
To decode :
$('object').html(value).text();