Can someone explain how to implement the jQuery File Upload plugin?

I was looking for a similar functionality some days back and came across a good tutorial on tutorialzine. Here is an working example. Complete tutorial can be found here.

Simple form to hold the file upload dialogue:

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">  <input type="file" name="uploadctl" multiple />  <ul id="fileList">    <!-- The file list will be shown here -->  </ul></form>

And here is the jQuery code to upload the files:

$('#upload').fileupload({  // This function is called when a file is added to the queue  add: function (e, data) {    //This area will contain file list and progress information.    var tpl = $('<li class="working">'+                '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+                '<p></p><span></span></li>' );    // Append the file name and file size    tpl.find('p').text(data.files[0].name)                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');    // Add the HTML to the UL element    data.context = tpl.appendTo(ul);    // Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way.    tpl.find('input').knob();    // Listen for clicks on the cancel icon    tpl.find('span').click(function(){      if(tpl.hasClass('working')){              jqXHR.abort();      }      tpl.fadeOut(function(){              tpl.remove();      });    });    // Automatically upload the file once it is added to the queue    var jqXHR = data.submit();  },  progress: function(e, data){        // Calculate the completion percentage of the upload        var progress = parseInt(data.loaded / data.total * 100, 10);        // Update the hidden input field and trigger a change        // so that the jQuery knob plugin knows to update the dial        data.context.find('input').val(progress).change();        if(progress == 100){            data.context.removeClass('working');        }    }});//Helper function for calculation of progressfunction formatFileSize(bytes) {    if (typeof bytes !== 'number') {        return '';    }    if (bytes >= 1000000000) {        return (bytes / 1000000000).toFixed(2) + ' GB';    }    if (bytes >= 1000000) {        return (bytes / 1000000).toFixed(2) + ' MB';    }    return (bytes / 1000).toFixed(2) + ' KB';}

And here is the PHP code sample to process the data:

if($_POST) {    $allowed = array('jpg', 'jpeg');    if(isset($_FILES['uploadctl']) && $_FILES['uploadctl']['error'] == 0){        $extension = pathinfo($_FILES['uploadctl']['name'], PATHINFO_EXTENSION);        if(!in_array(strtolower($extension), $allowed)){            echo '{"status":"error"}';            exit;        }        if(move_uploaded_file($_FILES['uploadctl']['tmp_name'], "/yourpath/." . $extension)){            echo '{"status":"success"}';            exit;        }        echo '{"status":"error"}';    }    exit();}

The above code can be added to any existing form. This program automatically uploads images, once they are added. This functionality can be changed and you can submit the image, while you are submitting your existing form.

Updated my answer with actual code. All credits to original author of the code.

Source:http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

I've just spent 2 hours battling with jQuery Upload but gave up because of the amount of dependencies (I had 13 JS files included to get all the bells and whistles).

I did a bit more searching and came across a neat project called Dropzone.js, which does not have any dependencies.

The author has also created a bootstrap demo which was inspired by the jQuery File Upload plugin.

I hope this saves someone else some time.

I also struggled with this but got it working once I figured out how the paths work in UploadHandler.php: upload_dir and upload_url are about the only settings to look at to get it working. Also check your server error logs for debugging information.