clzola · July 25, 2016 08:50
diff --git a/create.php b/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>
diff --git a/upload.js b/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;
	}
	});
	}