Upload Files Using JQuery + HTML5

Posted on Nov 24, 2011

jQuery.uploader is a simple jquery plugin for uploading files using HTML5.

  • Simple setup (8 steps)
  • Files are uploaded in a queue
  • Several callbacks give you fine control over the upload process
  • Flash-free

Requirements

  • jQuery
  • jquery.uploader code
1

We start with the document ready function call where we prepare values for the plugin.

 1 $(document).ready(function() {
 2   $("#uploader").uploader('init', {
 3     'url'                       : 'http://mydomain.com/post.php',
 4     'form_id'                   : 'uploader_form',
 5     'error_callback'            : error_callback,
 6     'pre_upload_callback'       : pre_upload_callback,
 7     'post_upload_callback'      : post_upload_callback,
 8     'all_complete_callback'     : all_complete_callback,
 9     'populate_display_callback' : populate_display_callback,
10     'unsupported_callback'      : unsupported_callback
11   });
12 });
2

Here we have the page element that jquery.uploader uses. Note the matching id values for the input and form elements as defined above.

1 <form id="uploader_form">
2   <input id="uploader" type="file" multiple="">
3 </form>
3

We are able to define several callback methods for controlling different moments in the upload process.

Lets look at the populate_display_callback method. Before uploading begins, this method is called for each file in the upload list. Here we are using a simple template that displays the filenames.

1 function populate_display_callback(id, file) {
2   var template = $("#upload_template").html();
3   $("#complete").append(template).find(".filename").text(file.fileName);
4   $("#complete > div:last-child").attr("id", id);
5 }
4

Our upload_template has a remove element, but I leave it up to you to write your own code for deleting a file from the server. Just remember, if you keep it simple you can use the upload id to locate the file server side and delete it. It is a simple AJAX call.

1 <div id="upload_template">
2   <div class="upload">
3     <div class="filename"></div>
4     <div class="remove"></div>
5   </div>
6 </div>
5

Now process files on the server side. The HTTP_X_ID is a unique client side value that you should use to track server side files. For instance when a user deletes a file, the HTTP_X_ID should map to the server side file.

 1 <?php
 2 $home  = $_SERVER['DOCUMENT_ROOT']; 
 3 $home  = preg_replace("/demo.4ydx.com/", '', $home);
 4 $index = preg_replace("/[^A-Za-z0-9_]/", '', $_SERVER['HTTP_X_ID']);
 5 file_put_contents($home.'uploads/'.$index, file_get_contents("php://input"));
 6 header("X-ID: {$_SERVER['HTTP_X_ID']}");
 7 header("X-FILE-SIZE: {$_SERVER['HTTP_X_FILE_SIZE']}");
 8 header("X-FILE-NAME: {$_SERVER['HTTP_X_FILE_NAME']}");
 9 echo '{ "status" : "OK", "id" : "'.$_SERVER['HTTP_X_ID'].'" }';
10 ?>
6

Provide the user with a way to abort an upload in progress.

1 <button class="abort" onclick="$('#uploader').uploader('abort');">Abort</button>
7

Lets add a progress bar.

1 <div class="progressbar" style="display: none; ">
2   <div class="progress" id="progress" style="width: 0px; "></div>
3 </div>
8

Finally our post upload callback is a good place to evaluate the server response. The code above (#5) hands back the HTTP_X_ID, which can be used to directly access the element on the page.

1 function post_upload_callback(headers, response) {
2   $("#" + response.id).text("Completed uploading");
3 }

Technical details of the HTML5 specification.