clzola/create.php

## create.php
<!doctype html>

<html>
	<head>
		<title>Upload Photos</title>
		<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>

		<style type="text/css">
			.fileUpload {
                position: relative;
                overflow: hidden;
            }
            .fileUpload input.upload {
                position: absolute;
                top: 0;
                right: 0;
                margin: 0;
                padding: 0;
                font-size: 20px;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
            }
		</style>
	</head>

	<body>
		<main class="container-fluid" style="margin-top: 12px;">
			<div class="row">
				<div class="col-xs-12">
					<div class="fileUpload btn btn-success">
						<span>Upload</span>
						<input type="file" class="upload" id="photoFileSelector" multiple="">
					</div>
					<button class="btn btn-primary" id="startButton">Start</button>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12" style="margin-top: 12px;">
					<table id="uploadTable" class="table table-stripped">
						<tbody></tbody>
					</table>
				</div>
			</div>
		</main>

		<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
		<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="upload.js"></script>
	</body>
</html>

## upload.js
var jqUploadTable = null;
var jqUploadButton = null;
var jqStartButton = null;

function createProgressBar(file) {
	var progress = $("<div>", {"class": "progress", "style": "width: 300px"});
	var bar = $("<div>", {
		"class": "progress-bar",
		"role": "progressbar",
		"aria-valuenow": "0",
		"aria-valuemin": "0",
		"aria-valuemax": "100",
		"style": "width: 0%;"
	});

	bar.appendTo(progress);
	progress.bar = bar;

	progress.setValue = function(value) {
		this.bar.attr("aria-valuenow", value);
		this.bar.css("width", value + "%");
	}

	return progress;
}

function getHumanReadableFileSize(file) {
	return file.size;
}

function onStartButtonClick(event) {
	uploadNextPhoto();
}

function uploadNextPhoto() {
	var rows = $("tr");
	for(var i=0; i<rows.length; i++) {
		var photo = $(rows[i]).data("photo");
		if( photo.uploaded === false ) {
			console.log(i);
			photo.startUpload();
			break;
		}
	}
}

function onPhotoFileSelectorChange(event) {
	for(var i=0; i<event.target.files.length; i++) {
		var photo = new Photo(event.target.files[i]);
		jqUploadTable.addRow(photo.row);
	}

	$(event.target).val("");
}

function onRemoveButtonClick(event) {
	$(event.target).closest("tr").remove();
}

function onDocumentReady() {
	jqUploadTable = $("#uploadTable");
	jqUploadTable.addRow = function(row) {
		jqUploadTable.find("tbody").append(row);
	};

	jqUploadTable[0].addEventListener("imageUploadCompleted", function(event) {
		uploadNextPhoto();
	});

	jqStartButton = $("#startButton");
	jqStartButton.click(onStartButtonClick);

	jqUploadButton = $("#photoFileSelector");
	jqUploadButton.change(onPhotoFileSelectorChange);
}

$(document).ready(onDocumentReady);

var Photo = function(file) {
	this.file = file;
	this.uploaded = false;
	this.progressBar = createProgressBar(file);
	this.row = $("<tr>");
	this.columns = [$("<td>"), $("<td>"), $("<td>"), $("<td>")];

	var that = this;
	var fileReader = new FileReader();

	fileReader.onload = function(event) {
		var imageTag = $("<img>", {
			src: event.target.result,
			style: "width: 80px; height: 45px"
		});

		var removeButton = $("<button>", {"class": "btn btn-danger", html: "Remove"});
		removeButton.click(onRemoveButtonClick);

		that.row.data("photo", that);

		that.columns[0].append(imageTag);
		that.columns[1].append(file.name);
		that.columns[2].append([getHumanReadableFileSize(file), that.progressBar]);
		that.columns[3].append(removeButton);

		that.row.append([that.columns[0], that.columns[1], that.columns[2], that.columns[3]])
	}

	fileReader.readAsDataURL(file);
}

Photo.prototype.startUpload = function() {
	var formData = new FormData();
	formData.append("photo", this.file);

	var photo = this;

	$.ajax({
        url: "upload.php",
        method: "post",
        processData: false,
        data: formData,
        contentType: false,

        success: function(data, textStatus, jqXHR) {
			photo.uploaded = true;
			console.log("Success Handler");
		},

        complete: function (jqXHR, testStatus) {
			var event = new Event("imageUploadCompleted");
			jqUploadTable[0].dispatchEvent(event);
		},

        error: function(jqXHR, textStatus, errorThrown) {
			console.log(jqXHR, textStatus, errorThrown);
			console.log("Error Handler");
		},

        xhr: function() {
			var xhrctrl = new window.XMLHttpRequest();
			xhrctrl.upload.addEventListener("progress", function(event) {
				if( event.lengthComputable ) {
					var percent = event.loaded / event.total;
					photo.progressBar.setValue(Math.floor(percent * 100));
				}
			}, false);

			return xhrctrl;
		}
    });
}
	<!doctype html>

	<html>
	<head>
	<title>Upload Photos</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>

	<style type="text/css">
	.fileUpload {
	position: relative;
	overflow: hidden;
	}
	.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	}
	</style>
	</head>

	<body>
	<main class="container-fluid" style="margin-top: 12px;">
	<div class="row">
	<div class="col-xs-12">
	<div class="fileUpload btn btn-success">
	<span>Upload</span>
	<input type="file" class="upload" id="photoFileSelector" multiple="">
	</div>
	<button class="btn btn-primary" id="startButton">Start</button>
	</div>
	</div>
	<div class="row">
	<div class="col-xs-12" style="margin-top: 12px;">
	<table id="uploadTable" class="table table-stripped">
	<tbody></tbody>
	</table>
	</div>
	</div>
	</main>

	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="upload.js"></script>
	</body>
	</html>
	var jqUploadTable = null;
	var jqUploadButton = null;
	var jqStartButton = null;

	function createProgressBar(file) {
	var progress = $("<div>", {"class": "progress", "style": "width: 300px"});
	var bar = $("<div>", {
	"class": "progress-bar",
	"role": "progressbar",
	"aria-valuenow": "0",
	"aria-valuemin": "0",
	"aria-valuemax": "100",
	"style": "width: 0%;"
	});

	bar.appendTo(progress);
	progress.bar = bar;

	progress.setValue = function(value) {
	this.bar.attr("aria-valuenow", value);
	this.bar.css("width", value + "%");
	}

	return progress;
	}

	function getHumanReadableFileSize(file) {
	return file.size;
	}

	function onStartButtonClick(event) {
	uploadNextPhoto();
	}

	function uploadNextPhoto() {
	var rows = $("tr");
	for(var i=0; i<rows.length; i++) {
	var photo = $(rows[i]).data("photo");
	if( photo.uploaded === false ) {
	console.log(i);
	photo.startUpload();
	break;
	}
	}
	}

	function onPhotoFileSelectorChange(event) {
	for(var i=0; i<event.target.files.length; i++) {
	var photo = new Photo(event.target.files[i]);
	jqUploadTable.addRow(photo.row);
	}

	$(event.target).val("");
	}

	function onRemoveButtonClick(event) {
	$(event.target).closest("tr").remove();
	}

	function onDocumentReady() {
	jqUploadTable = $("#uploadTable");
	jqUploadTable.addRow = function(row) {
	jqUploadTable.find("tbody").append(row);
	};

	jqUploadTable[0].addEventListener("imageUploadCompleted", function(event) {
	uploadNextPhoto();
	});

	jqStartButton = $("#startButton");
	jqStartButton.click(onStartButtonClick);

	jqUploadButton = $("#photoFileSelector");
	jqUploadButton.change(onPhotoFileSelectorChange);
	}

	$(document).ready(onDocumentReady);

	var Photo = function(file) {
	this.file = file;
	this.uploaded = false;
	this.progressBar = createProgressBar(file);
	this.row = $("<tr>");
	this.columns = [$("<td>"), $("<td>"), $("<td>"), $("<td>")];

	var that = this;
	var fileReader = new FileReader();

	fileReader.onload = function(event) {
	var imageTag = $("<img>", {
	src: event.target.result,
	style: "width: 80px; height: 45px"
	});

	var removeButton = $("<button>", {"class": "btn btn-danger", html: "Remove"});
	removeButton.click(onRemoveButtonClick);

	that.row.data("photo", that);

	that.columns[0].append(imageTag);
	that.columns[1].append(file.name);
	that.columns[2].append([getHumanReadableFileSize(file), that.progressBar]);
	that.columns[3].append(removeButton);

	that.row.append([that.columns[0], that.columns[1], that.columns[2], that.columns[3]])
	}

	fileReader.readAsDataURL(file);
	}

	Photo.prototype.startUpload = function() {
	var formData = new FormData();
	formData.append("photo", this.file);

	var photo = this;

	$.ajax({
	url: "upload.php",
	method: "post",
	processData: false,
	data: formData,
	contentType: false,

	success: function(data, textStatus, jqXHR) {
	photo.uploaded = true;
	console.log("Success Handler");
	},

	complete: function (jqXHR, testStatus) {
	var event = new Event("imageUploadCompleted");
	jqUploadTable[0].dispatchEvent(event);
	},

	error: function(jqXHR, textStatus, errorThrown) {
	console.log(jqXHR, textStatus, errorThrown);
	console.log("Error Handler");
	},

	xhr: function() {
	var xhrctrl = new window.XMLHttpRequest();
	xhrctrl.upload.addEventListener("progress", function(event) {
	if( event.lengthComputable ) {
	var percent = event.loaded / event.total;
	photo.progressBar.setValue(Math.floor(percent * 100));
	}
	}, false);

	return xhrctrl;
	}
	});
	}