Ajax Upload and Resize an Image with PHP

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách upload ảnh lên server đồng thời sẽ resize lại kích thước của bức ảnh bằng PHP

Demo ảnh

Cấu trúc

Bài viết này thao tác trên 3 thư mục là js, include, uploads và các file bao gồm

includes
- — getExtension.php
- — compressImage.php
js
- — jquery.min.js
- — jquery.form.js
uploads
index.php
ajaximageupload.php
db.php

Code

Database

Chúng ta khởi tạo một bảng cơ sở dữ liệu có các trường sau đây:

CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200)
)

CREATE TABLE `users` (

`uid` int(11) AUTO_INCREMENT PRIMARY KEY,

`username` varchar(255) UNIQUE KEY,

`password` varchar(100),

`email` varchar(255) UNIQUE KEY,

`profile_image` varchar(200)

)

File kết nối db.php

 <?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

<?php

define('DB_SERVER', 'localhost');

define('DB_USERNAME', 'username');

define('DB_PASSWORD', 'password');

define('DB_DATABASE', 'database');

$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

index.php

Trong đó, file index.php sẽ có code sau

<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<div id='preview'>
</div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image: 
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg" />

</div>
</form>

<?php

include('db.php');

session_start();

$session_id='1'; // User login session value

</div>

Upload image:

</div>

</form>

Chúng ta áp dụng đoạn code sau để làm ẩn hiện các button bằng việt áp dụng các id #imageloadstatus và #imageloadbutton

 <script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>

ajax/libs/jquery/1.9.1/jquery.min.js"></script>

$(document).ready(function()

{

$('body').on('change','#photoimg', function()

{

var A=$("#imageloadstatus");

var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#preview',

beforeSubmit:function(){

A.show();

B.hide();

success:function(){

A.hide();

B.show();

error:function(){

A.hide();

B.show();

} }).submit();

});

</script>

Ajaximage.php

File này chứa các đoạn code ajax

 <?php
include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
include_once 'includes/getExtension.php';
$imagename = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($imagename))
{
$ext = strtolower(getExtension($imagename));
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$uploadedfile = $_FILES['photoimg']['tmp_name'];

//Re-sizing image. 
include 'includes/compressImage.php';
$widthArray = array(200,100,50); //You can change dimension here.
foreach($widthArray as $newwidth)
{
$filename=compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth);
echo "<img src='".$filename."' class='img'/>";
}

//Original Image
if(move_uploaded_file($uploadedfile, $path.$actual_image_name))
{
//Insert upload image files names into user_uploads table
mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id';");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>

<?php

include('db.php');

session_start();

$session_id='1'; // User session id

$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")

{

include_once 'includes/getExtension.php';

$imagename = $_FILES['photoimg']['name'];

$size = $_FILES['photoimg']['size'];

if(strlen($imagename))

{

$ext = strtolower(getExtension($imagename));

if(in_array($ext,$valid_formats))

{

if($size<(1024*1024)) // Image size max 1 MB

{

$actual_image_name = time().$session_id.".".$ext;

$uploadedfile = $_FILES['photoimg']['tmp_name'];

//Re-sizing image.

include 'includes/compressImage.php';

$widthArray = array(200,100,50); //You can change dimension here.

foreach($widthArray as $newwidth)

{

$filename=compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth);

echo "<img src='".$filename."' class='img'/>";

}

//Original Image

if(move_uploaded_file($uploadedfile, $path.$actual_image_name))

{

//Insert upload image files names into user_uploads table

mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id';");

echo "<img src='uploads/".$actual_image_name."' class='preview'>";

}

else

echo "failed";

}

else

echo "Image file size max 1 MB";

}

else

echo "Invalid file format..";

}

else

echo "Please select image..!";

exit;

}

CompressImage.php

File dùng để resize lại ảnh khi upload lên

<?php
function compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth)
{

if($ext=="jpg" || $ext=="jpeg" )
{
$src = imagecreatefromjpeg($uploadedfile);
}
else if($ext=="png")
{
$src = imagecreatefrompng($uploadedfile);
}
else if($ext=="gif")
{
$src = imagecreatefromgif($uploadedfile);
}
else
{
$src = imagecreatefrombmp($uploadedfile);
}

list($width,$height)=getimagesize($uploadedfile);
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
$filename = $path.$newwidth.'_'.$actual_image_name; //PixelSize_TimeStamp.jpg
imagejpeg($tmp,$filename,100);
imagedestroy($tmp);
return $filename;
}
?>

<?php

function compressImage($ext,$uploadedfile,$path,$actual_image_name,$newwidth)

{

if($ext=="jpg" || $ext=="jpeg" )

{

$src = imagecreatefromjpeg($uploadedfile);

}

else if($ext=="png")

{

$src = imagecreatefrompng($uploadedfile);

}

else if($ext=="gif")

{

$src = imagecreatefromgif($uploadedfile);

}

else

{

$src = imagecreatefrombmp($uploadedfile);

}

list($width,$height)=getimagesize($uploadedfile);

$newheight=($height/$width)*$newwidth;

$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

$filename = $path.$newwidth.'_'.$actual_image_name; //PixelSize_TimeStamp.jpg

imagejpeg($tmp,$filename,100);

imagedestroy($tmp);

return $filename;

}

Nội dung file getExtension.php

function getExtension($str)
{
$i = strrpos($str,".");
if (!$i)
{
return "";
}
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}

function getExtension($str)

{

$i = strrpos($str,".");

if (!$i)

{

return "";

}

$l = strlen($str) - $i;

$ext = substr($str,$i+1,$l);

return $ext;

}

Download code

Loạt bài viết về Upload ảnh bằng ajax

(9Lessions)

Ajax Upload and Resize an Image with PHP

Demo ảnh

Cấu trúc

Code

Database

index.php

Ajaximage.php

CompressImage.php

Nội dung file getExtension.php

Download code

Like this:

Có liên quan

Nguyễn Trung Hiếu

Demo ảnh

Cấu trúc

Code

Database

index.php

Ajaximage.php

CompressImage.php

Nội dung file getExtension.php

Download code

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu