Online Image Storage

0
1096

Download Source Code

Online Image storage is a web based image storage system by which you can upload, preview, download and delete image.

Introduction

Online Image Storage is a web based image storage by which you can store images in an upload folder. In this project I have created two pages; one is Image Upload page and other is Image Gallery page.

In the “Image upload” page, you can upload an image through form submit with javascript client side validation (image extension and image size). After validate the image, it will be uploaded through ajax-php submission.

In the “Image Gallery” page, all images will be fetching from upload folder and images will be display by the jQuery-CSS Lightbox image gallery where each image has delete and download button.

Project Overview

In this project I have present two pages; where one is “Image Upload” page and other is “Image Gallery” page. Now I want to discuss about those two pages one by one.

“Image Upload” page

Imager Uploader Form

“Image Upload” is page source code is placed in the ImageUpload.php
In the ImageUpload.php page, I have created a form that contains two fields: one is input field for file upload and other is submitting button to store the image in the upload folder. Here for the default, submit button visibility is hidden.

When you click on the file uploaded input button then onchange it will be call a javascript Display image preview function to preview the selected image that you are selecting.

But to preview earlier it will be validate the image extension. If image extension is not within jpeg/jpg/png/gif/bmp then an error text will be displayed in the image-details div.

Next it is checked the image size is not greater than maximum file size 1MB. If file size is greater than max file size than an error text will be displayed in the image-details div.

If the above two client side validations (image file extension and image file size) are ok then selecting image will be previewed.

And HTML image is previewed image-preview div is as following

When image is preview then upload button will be appear.

And image name and size will be displayed in the image-details div.

Now time to click the upload button. When you click the upload button then image will be submitted through ajax call is as following,

By the ajax POST method image will be uploaded in the upload folder through php code (upload.php) execution.

If image is uploaded successfully then a text “The image has been uploaded” is shown in the Upload Success div.

And next 1000ms later, the page will be redirect in the ‘ImageGallery.php’ page.

“Image Gallery” page

Online Image Storage – Image Gallery

In the “Image Gallery” page source code ImageGallery.php, which call images are fetching from upload folder and each image name is shown if your mouse hover over on the image.

Here each image has a download and delete button.

For the delete button I have used the following html,

Click on the delete button, delete.php is called by the ajax post method.

Calling delete.php the image is just unlinked through image post id.

For the download button, send image relative path by the get method to the download.php page. To do this,

And download.php contains is as following:-

If you click the image it will be appear in the lightbox window to display the image. To do this I have used Gallery.js

Image Popup – after click the image

Linking between two pages

After completing the two pages “ImageUpload.php” and “ImageGallery.php” one can the link through others.

To link from ‘ImageUpload.php’ page to ‘ImageGallery.php’ page, you can use the following line in the ‘ImageUpload.php’ page.

To link from ‘ImageGallery.php’ page to ‘ImageUpload.php’ page, you can use the following line in the ‘ImageGallery.php’ page.

Conclusion

Thank you for staying with us. Keep your happy coding…:)

LEAVE A REPLY