Uploading image(s):
First create your upload form:
<form name="upload" action="upload.php" method="POST" enctype="multipart/form-data">
Select image to upload: <input type="file" name="image[]" multiple>
<input type="submit" name="upload" value="upload">
</form>
ImageUpload is designed to handle single or multiple files at once. It is however important
that you always use the same name in the name attribute of your file input elements!
So for multiple file selections:
<input type="file" name="image[]" multiple>
And for single file selections:
<input type="file" name="image[]">
<input type="file" name="image[]">
<input type="file" name="image[]">
Secondly, you'll need to prepare your PHP form handler to use the ImageUpload class:
<?php
require_once "config.php";
require_once "imgupload.class.php";
$img = new ImageUpload;
$result = $img->uploadImages($_FILES['image']);
The result is een object that contains any errors, messages and database table id's regarding the uploads.
If you wish to test for errors:
if(!empty($result->error)){
foreach($result->error as $errMsg){
echo $errMsg;
}
}
If you wish to display information about each file uploaded to the visitor.
For example:
File: img1.png was succesfully uploaded!
File: img2.png was succesfully uploaded!
File: test.exe is not an image. The file is removed!
File: img3.jpg exceeds the maximum file size of: 2MB. The file is removed!
File: img4.gif was succesfully uploaded!
if(!empty($result->info)){
foreach($result->info as $infoMsg){
echo $infoMsg;
}
}
If you need the database table id's for each successful file uploaded because you want the image(s) to be embedded somewhere in your website directly:
if(!empty($result->ids)){
foreach($result->ids as $id){
// Do something with $id
}
}
Displaying image(s):
If you simply want to display the image in the browser:
Browse to:
http://www.yourwebsite.com/image.php?id=1
Where id is the id of the image.
To show an image inside a webpage with other content:
Put the following Javascript code inside your head element:
function load_img(element, id, style = "") {
document.getElementById(element).innerHTML='<object type="text/html" style="'+ style +'" data="image.php?id='+ id +'"></object>';
}
document.addEventListener( "DOMContentLoaded", function(){
// Load the images after the website is loaded. Some examples:
load_img("img", 1);
load_img("img2", 2);
});
Put div element(s) inside your webpage where you wish to display the image(s):
<div id="img"></div>
<div id="img2"></div>
If you wish to style the images (resize them for example), you'll need to style the object element that's created with Javascript:
load_img("img", 1, "width: 300px; border: 1px solid black;");