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
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 });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>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 }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>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 ?>Provide the user with a way to abort an upload in progress.
1 <button class="abort" onclick="$('#uploader').uploader('abort');">Abort</button>Lets add a progress bar.
1 <div class="progressbar" style="display: none; ">
2 <div class="progress" id="progress" style="width: 0px; "></div>
3 </div>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.