Multi uploading in PHP, Jquery and The File Api With Thumbnail Preview

In this tutorial we will create a multi upload form using php, jquery and the new javascript File Api. for people who don’t know the File Api it’s a new Api Added to the DOM in the Html5 specification that enables web browsers to read the file locally and displays its contents before uploading them to the server. in this tutorial we will use it to display a thumbnail preview of each image that we select. refer to my article here for more details about the file api.

 

Project requirements

  • twitter bootstrap.
  • jquery library.
  • php with apache or IIS server.

 

Implementation

 

Project Structure

first create a new directory in your localhost path with the below file structure.

 

  • index.php: load the home page which contains the upload form.
  • upload.php: will do the actual uploading of the form.
  • success.php: loaded when upload is done and success message displayed to the user along with the uploaded images.
  • js: contain javascript files required for form manipulation.
  • css: contain custom css for the form.
  • uploads: writable directory that will contain the uploaded images. be sure that to give this directory a writable permission.

  • Let’s begin with the homepage index.php

In the above code first we begin by loading some external assets for jquery and bootstrap then we create a form with file input that has a display none and button of type button like this.

and the reason we  set display none to the file input to show a nice upload button with bootstrap instead of the classic html file input.

Then we create a div with id of #preview and this will contain the thumbnails of the selected images.

 

Next we will go through the scripts file in the js folder:

First when we click on the add images button we trigger click on the file input to show the file dialog

Then we listen to change event and checking if the File Api is supported or not to show a message to the user. then if File Api is supported we call function handleFile() which will preview the the selected file.

handleFile() first will validate the file to be sure that its image file or not then we will create a new instance of the FileReader(). Then using the FileReader.onload we will process and display the thmbnails. again refer to my article here for more details about the File Api.

Next the upload code:

The code above is pretty easy first we check if the form was submitted then we call reformatFilesArray($_FILES) function to restructure the files array so that each file has it’s own array then we call upload() function and pass on the $files variable.  The upload function will loop through the files and do some checks like validating each file with valid extension and check if the file is_upload_file() then process the file. after successful upload we return the uploaded files and display a success message and the uploaded files in the success.php file.

success.php

css/style.css

Download source code

In this tutorial you learned how to build upload form and how to use the File Api to read file data and display thumbnails actually it’s a greet addition in the Html5 also how to validate file extensions to display the right files.

Share this: