:::: MENU ::::

AJAX style multiple images upload using HTML5, JSON and jQuery

You might have seen at many places like Facebook or even in wordpress editor – “Add Media” section, you could upload multiple images without refreshing the page. After image upload, you could immediately see images preview.

multiple-upload-screenshot

How HTML5 multiple images upload works?

HTML5 provides multiple attributes to select multiple file in input file element.

So now you can select multiple files when upload dialog popups up.

Basic HTML5 Setup for multiple images upload

First of all, We’ll hide all elements and use a <button> called “Upload”. It’ll opens up images upload dialog box. Then, once user select files code will auto-submit <form> into <iframe> which calls server side uploading script and upload files.

Now jQuery Code to trigger uploadbox and start uploading using above hidden iframe.

So, once form is submitted backend script PHP, python, jsp, .NET whatever handles it and send response back in JSON format.

Success Responses:- list of files uploaded.

Error Responses:

Code to send and handle this JSON response.

within upload iframe, following javascript code will call parent frame’s uploadDone function

uploadDone function to handle this response and render images.

Above code will check, if error is sent then error will be displayed otherwise images will be rendered below upload button.

PHP code to handle multiple-upload at server side.

Finally making javascript more modular and non-sucking with closures that doesn’t conflict with global scope.

Writing Upload object with file upload functions.


2 Comments

  • Reply disdaining |

    That’s a great tutorial. Can you please suggest how to add a remove button? when a user click on it so the image should be deleted if a user has upload an incorrect image.

    Hope to hear!
    Thanks

So, what do you think ?

  •