Resize and Upload multiple images using PHP and Ajax

Demo Online Download Code

6 years ago
Zaid Bin Khalid
51,013 Views
36

Multiple Files Uploaded in PHP.

Resize Images
Change the quality of images
Add watermark
Set watermark position x-y
Check to upload image size
Rename images
Create thumbnail with the original image [New feature added]

This is a very basic class that you can use to upload images.

By using this class you can change the QUALITY of the image, Add watermark and you also can RESIZE the image. You just need to set the name of your files in a Dropzone like below.

paramName: “files”, [The name that will be used to transfer the file] for DropZone JS read [DropZone].

The complete code of DropZone’s initialization is given below. Remember I customize the Dropzone style you can use or change as per your need.

HTML

<div class="dropzone dz-clickable" id="myDrop">
	<div class="dz-default dz-message" data-dz-message="">
		<span>Drop files here to upload</span>
	</div>
</div>

Javascript

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", 
{ 
	paramName: "files", // The name that will be used to transfer the file
	addRemoveLinks: true,
	uploadMultiple: true,
	autoProcessQueue: false,
	parallelUploads: 50,
	maxFilesize: 10, // MB
	acceptedFiles: ".png, .jpeg, .jpg, .gif",
	url: "ajax/actions.ajax.php",
});

/* Add Files Script*/
myDropzone.on("success", function(file, message){
	$("#msg").html(message);
	setTimeout(function(){window.location.href="index.php"},800);
});

myDropzone.on("error", function (data) {
	$("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
});

myDropzone.on("complete", function(file) {
	myDropzone.removeFile(file);
});

$("#add_file").on("click",function (){
	myDropzone.processQueue();
});

In your PHP file using the below code.

<?php
require('../az.multi.upload.class.php');
$rename    =   rand().time(); // You can choose your own name.
$upload    =   new ImageUploadAndResize(); // Object create
$upload->uploadFiles('files', '../uploads', true, 250, '../mini-logo.png', 20, 20, $rename, 0777, 100, '850', '250');
?>

Parameters that we used to uploadFiles() method explained below.

<?php
    $yourFileName = 'Your paramName' // Set in a Dropzone
    $yourDestination  = '../upload' // Folder/Dir name where you need to save images
    $createThumb  =  false; // This is set default
    $minImgWidth  = 400 //Set to check Minimum width of uploaded images.
    $waterMarkImgSrc  = '../mini-logo.png' //Set watermark
    $xPosition  = 20 //Set position of watermark X-AXIS
    $yPosition  = 20 //Set position of watermark Y-AXIS
    $reName = 'Rename uploaded file if you need' // Left empty save file default name
    $permission = 0655 // Folder/Dir permission set 0777 for full access
    $quality  = 100 // Set image quality you can set it between 1-100
    $newWidth = '' // If you want to resize the image then pass int value else upload without resizing
    $thumbWidth = //If you want to resize the image thumb then pass int value else upload without resizing image will be saved. 
?>

After upload images method will return images Name Array that you can use to submit into DB TABLE like.

<?php
$db   =   new mysqli('localhost','root','','test');

print"<pre>";
foreach($upload->prepareNames as $name){
    $sql = "INSERT INTO YOURTABLE_NAME (YOUR_COL_NAME) VALUES ('".$name."')";

    if ($db->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $db->error;
    }
}
print"</pre>";
?>

All parameters that you need to set

Parameters	Default Value	Description
$yourFileName	Not set	Set in a Dropzone
$yourDestination	Not set	Folder name where you need to save images [‘../Upload/’]
$createThumb	false	If you set true the thumb folder will be created and thumb files move there
$minImgWidth	400	Set to check the Minimum width of uploaded images.
$waterMarkImgSrc	empty	You can set your own image as a watermark
$xPosition	empty	Set the position of watermark X-AXIS
$yPosition	empty	Set position of watermark Y-AXIS
$reName	empty	Rename uploaded file if you need it. Left empty save file default name
$permission	0655	Folder/Dir permission set 0777 for full access
$quality	100	Image quality in percent 1-100
$newWidth	empty	If you want to resize the image then pass int value else upload without resizing the image will be saved.
$thumbWidth	empty	If you want to resize the image thumb then pass int value else upload without resizing image will be saved.