Ajax file upload with HTTP PUT method using PHP and jQuery

By Clain Dsilva June 15, 2016
file upload using http put with ajax, jquery and php

Uploading files with http Put method is more a great way to stream larger files opposed to the Post all data at one go method. This comes handy if you are uploading larger files.The regular upload process leaves no clue to the user about how much of the file is uploaded and how much more is remaining .

The regular upload process leaves no clue to the user about how much of the file is uploaded and how much more is remaining .

With the help of jQuery we will be able to do an asynchronous file upload using the Put method that has a progress bar to show what percentage¬† of the file is uploaded in real time, now that’s cool.

To start with we need to have the basic file upload elements …

HTML

You might have noticed that there is no <form> tag, this is not necessary as we are doing an asynchronous upload process

Now lets look into the Progress bar HTML

JavaScript

The onChange event at the file element will trigger the JavaScript upload function. We make use of the inbuilt JavaScript FileReader API to read the file as 8 unit array buffer. A progress listener function is binded to the Ajax call to read the upload progress in real time , this will update the progress bar with the upload percentage so that the users can see the progress.

PHP

Read the Put data using the php file input stream. Create a new file at the file upload location and write the contents of php file stream to it .

Cool you have now uploaded a file asynchronously using the put method without using any form element , wow is that not awesome?

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
Ajax file upload with HTTP PUT method using PHP and jQuery, 5.0 out of 5 based on 1 rating

Leave a Reply

Your email address will not be published. Required fields are marked *