$(function(){
	var progressBar = $('progress');
	$('#my_form').on('submit', function(e){
		e.preventDefault();
		var $that = $(this),
            formData = new FormData($that.get(0));
		$.ajax({
			url: $that.attr('action'),
			type: $that.attr('method'),
			contentType: false,
			processData: false,
			data: formData,
			dataType: 'json',
			xhr: function(){
				var xhr = $.ajaxSettings.xhr();
				xhr.upload.addEventListener('progress', function(evt){
					if (evt.lengthComputable) {
						var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                        $('#example5')
                            .progress({
                                value    : percentComplete,
                                total    : 100,
                            })
                        ;
						progressBar.val(percentComplete).text(percentComplete + '%');
                        document.getElementById("status").innerHTML = 'Uploading...';
					}
				}, false);
				return xhr;
			},
			success: function(json){
				if(json){
					$that.after(json);
				}
                document.getElementById("status").innerHTML = 'Successfully uploaded.';
			},
            error: function() {
                document.getElementById("status").innerHTML = 'There was an error.';
            }
		});
	});
});