HTML5 uploader

uploader.js

$(document).ready(function() {

    $(".js-uploader").each(function() {
        var $form     = $(this.form);
        var $display  = $($(this).attr('data-filedisplay'));
        var targetURL =   $(this).attr('data-targeturl');
        var template  = $($(this).attr('data-template')).html();

        $(this).on('change', function() {
            var files = this.files;

            $(files).each(function() {
                var $obj      = $(template);
                var $progress = $obj.find("[role='progressbar']");
                var img       = $obj.find('img');

                $display.append($obj);

                var reader   = new FileReader();
                var formData = new FormData();

                reader.onload = function(e) {
                    $(img).attr('src', e.target.result);
                };

                formData.append('file', this);
                reader.readAsDataURL(this);

                $.ajax({
                    url         : targetURL,
                    type        : 'POST',
                    data        : formData,
                    processData : false,
                    contentType : false,
                    dataType    : 'json',
                    xhr         : function() {
                        var customXHR = $.ajaxSettings.xhr();
                        if(customXHR.upload) {
                            customXHR.upload.addEventListener('progress', function(e) {
                                if ( ! e.lengthComputable) return;

                                var percentage = Math.round((e.loaded * 100) / e.total);
                                $progress.attr('aria-valuenow', percentage);
                                $progress.css('width', percentage +'%');
                                $progress.html(percentage +'%');
                            });
                        }

                        return customXHR;
                    },
                    success : function(result) {
                        var html = $obj.html().replace(/{id}/g, result.id);
                        $obj.html(html);

                        $progress.html('Done!');
                    }
                });
            });
        });
    });

});