Skip to content

Commit 52d14d1

Browse files
mianzaidmianzaid
authored
Update README.md
1 parent e9f6d0d commit 52d14d1

1 file changed

Lines changed: 181 additions & 25 deletions

File tree

‎README.md‎

Lines changed: 181 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,192 @@
1-
# Resize and Upload multiple images using PHP and Ajax
1+
# PHP Multiple Image Upload with Resize, Watermark, Thumbnail & AJAX (Dropzone)
22

3-
Multiple Files Uploaded in PHP.
3+
This is a simple PHP-based image upload class that allows you to:
44

5-
1. Resize Images
6-
2. Change the quality of images
7-
3. Add watermark
8-
4. Set watermark position x-y
9-
5. Check to upload image size
10-
6. Rename images
11-
7. Create thumbnail with the original image **[New feature added]**
5+
- Upload multiple images using AJAX (Dropzone.js)
6+
- Resize images
7+
- Change image quality
8+
- Add watermark
9+
- Set watermark position (X-Y axis)
10+
- Validate image size before upload
11+
- Rename uploaded images
12+
- Create thumbnails from original images
13+
- Store image names for database insertion
1214

15+
---
16+
17+
## 🚀 Features
18+
19+
- Multiple file upload support
20+
- Dropzone.js integration
21+
- Image resizing
22+
- Image compression (quality control)
23+
- Watermark support
24+
- Thumbnail generation
25+
- File renaming option
26+
- Minimum image size validation
27+
- Easy database integration
28+
29+
---
30+
31+
## 📁 Frontend Setup (Dropzone.js)
32+
33+
### HTML
34+
35+
```html
36+
<div class="dropzone dz-clickable" id="myDrop">
37+
<div class="dz-default dz-message" data-dz-message="">
38+
<span>Drop files here to upload</span>
39+
</div>
40+
</div>
41+
42+
<button id="add_file">Upload Files</button>
43+
44+
<div id="msg"></div>
45+
```
46+
47+
### Javascript
48+
49+
```js
50+
Dropzone.autoDiscover = false;
51+
52+
var myDropzone = new Dropzone("div#myDrop", {
53+
paramName: "files", // name used to send file to server
54+
addRemoveLinks: true,
55+
uploadMultiple: true,
56+
autoProcessQueue: false,
57+
parallelUploads: 50,
58+
maxFilesize: 10, // MB
59+
acceptedFiles: ".png, .jpeg, .jpg, .gif",
60+
url: "ajax/actions.ajax.php",
61+
});
62+
63+
/* Success Event */
64+
myDropzone.on("success", function(file, message){
65+
$("#msg").html(message);
66+
setTimeout(function(){
67+
window.location.href="index.php"
68+
}, 800);
69+
});
70+
71+
/* Error Event */
72+
myDropzone.on("error", function () {
73+
$("#msg").html('<div class="alert alert-danger">Something went wrong, please try again!</div>');
74+
});
75+
76+
/* Remove file after upload */
77+
myDropzone.on("complete", function(file) {
78+
myDropzone.removeFile(file);
79+
});
80+
81+
/* Manual Upload Trigger */
82+
$("#add_file").on("click", function (){
83+
myDropzone.processQueue();
84+
});
85+
```
86+
87+
### Backend (PHP Upload Handler)
1388

1489
```php
15-
$yourFileName = 'Your paramName' // Set in a Dropzone
16-
$yourDestination = '../upload' // Folder/Dir name where you need to save images
17-
$createThumb = false; // This is set default
18-
$minImgWidth = 400 //Set to check Minimum width of uploaded images.
19-
$waterMarkImgSrc = '../mini-logo.png' //Set watermark
20-
$xPosition = 20 //Set position of watermark X-AXIS
21-
$yPosition = 20 //Set position of watermark Y-AXIS
22-
$reName = 'Rename uploaded file if you need' // Left empty save file default name
23-
$permission = 0655 // Folder/Dir permission set 0777 for full access
24-
$quality = 100 // Set image quality you can set it between 1-100
25-
$newWidth = '' // If you want to resize the image then pass int value else upload without resizing
26-
$thumbWidth = //If you want to resize the image thumb then pass int value else upload without resizing image will be saved.
90+
<?php
91+
require('../az.multi.upload.class.php');
92+
93+
$rename = rand() . time(); // custom file name
94+
95+
$upload = new ImageUploadAndResize(); // create object
96+
97+
$upload->uploadFiles(
98+
'files', // Dropzone paramName
99+
'../uploads', // destination folder
100+
true, // create thumbnail (true/false)
101+
250, // minimum image width
102+
'../mini-logo.png', // watermark image path
103+
20, // watermark X position
104+
20, // watermark Y position
105+
$rename, // rename file
106+
0777, // folder permission
107+
100, // image quality (1–100)
108+
'850', // new image width (resize)
109+
'250' // thumbnail width
110+
);
111+
?>
112+
```
113+
114+
115+
## 🧠 uploadFiles() Parameters Explained
116+
117+
| Parameter | Default | Description |
118+
|----------|--------|-------------|
119+
| `$yourFileName` | — | Dropzone paramName |
120+
| `$yourDestination` | — | Upload directory path |
121+
| `$createThumb` | false | Create thumbnail folder & files |
122+
| `$minImgWidth` | 400 | Minimum allowed image width |
123+
| `$waterMarkImgSrc` | empty | Watermark image path |
124+
| `$xPosition` | empty | Watermark X-axis position |
125+
| `$yPosition` | empty | Watermark Y-axis position |
126+
| `$reName` | empty | Rename uploaded file |
127+
| `$permission` | 0655 | Folder permissions |
128+
| `$quality` | 100 | Image quality (1–100) |
129+
| `$newWidth` | empty | Resize main image width |
130+
| `$thumbWidth` | empty | Thumbnail width |
131+
132+
---
133+
134+
## 🗄️ Save Uploaded Images to Database
135+
136+
After upload, the class returns an array of image names:
137+
138+
```php
139+
<?php
140+
$db = new mysqli('localhost','root','','test');
141+
142+
echo "<pre>";
143+
144+
foreach($upload->prepareNames as $name){
145+
146+
$sql = "INSERT INTO YOURTABLE_NAME (YOUR_COL_NAME)
147+
VALUES ('".$name."')";
148+
149+
if ($db->query($sql) === TRUE) {
150+
echo "Record inserted successfully\n";
151+
} else {
152+
echo "Error: " . $sql . "\n" . $db->error;
153+
}
154+
}
155+
156+
echo "</pre>";
157+
?>
158+
```
159+
160+
161+
### Folder Structure Example
162+
```
163+
project/
164+
│
165+
├── ajax/
166+
│ └── actions.ajax.php
167+
│
168+
├── uploads/
169+
├── thumbnails/
170+
├── az.multi.upload.class.php
171+
├── index.php
27172
```
28173

174+
### 🎯 Use Cases
175+
E-commerce product image upload
176+
Profile image upload system
177+
CMS media manager
178+
Gallery systems
179+
📌 Notes
180+
Ensure GD Library is enabled in PHP
181+
Set correct folder permissions (0777 recommended for testing)
182+
Adjust upload limits in php.ini if needed:
183+
upload_max_filesize
184+
post_max_size
185+
📜 License
29186

30-
> View online complete documentation and integration <a href="https://learncodeweb.com/web-development/resize-and-upload-multiple-images-using-php-and-ajax/" target="_blanck">Click Here</a>
187+
Free to use for personal and commercial projects.
31188

32-
> View working example <a href="https://learncodeweb.com/demo/web-development/resize-and-upload-multiple-images-using-php-and-ajax/" target="_blanck">View Demo</a>
189+
⭐ Support
33190

34-
Thank you
191+
If you like this project, give it a ⭐ on GitHub and share it with others!
35192

36-
Regards Zaid Bin Khalid

0 commit comments

Comments
 (0)