gistfile1.js

$("#container").on("drop", function(e){
	e.preventDefault();
	e.stopPropagation();

	var progress = document.createElement("div");
	target.append(progress);

	ajax({
		target: ["POST", "imageupload.php"],
		onprogress: function(progress){
			progress.innerText = progress;
		},
		ondone: function(e){
			progress.innnerText = "DONE";
			document.setTimeout(function(){
				progress.parentElement.removeChild(progress);
			}, 2000);
		},
		onerror: function(e){
			progress.innerText = "ERROR";
		}
	});
});

function ajax(conf){
	conf.onprogress = conf.onprogress || function(){};
	conf.ondone = conf.ondone || function(){};
	conf.onerror = conf.onerror || function(){};

	var xhr = new XMLHttpRequest();
	xhr.addEventListener("progress", function(e){
		if(e.lengthComputable){
			conf.onprogress(e.loaded/e.total);
		}
	});
	xhr.addEventListener("load", function(e){
		conf.ondone(e);
	});
	xhr.addEventListener("error", function(e){
		conf.onerror(e);
	});

	xhr.open(conf.target[0], conf.target[1]);
	xhr.send();
};

gistfile2.txt

var makeProgressBar = function(container){
	var div = document.createElement("div");
	container.appendChild(div);
	return {
		div: div,
		update: function(v){
			div.innerText = v;
		},
		removeAfter: function(delta){
			document.SetTimeout(function(){
				div.parentElement.removeChild(div);
			}, delta);
		}
	};
};

$("#container").on("drop", function(e){
	e.preventDefault();
	e.stopPropagation();

	var bar = makeProgressBar(target);

	ajax({
		target: ["POST", "imageupload.php"],
		onprogress: function(progress){
			bar.update(progress);
		},
		ondone: function(e){
			bar.update("done");
			bar.removeAfter(2000);
		},
		onerror: function(e){
			bar.update("ERROR");
		}
	});
});

function ajax(conf){
	conf.onprogress = conf.onprogress || function(){};
	conf.ondone = conf.ondone || function(){};
	conf.onerror = conf.onerror || function(){};

	var xhr = new XMLHttpRequest();
	xhr.addEventListener("progress", function(e){
		if(e.lengthComputable){
			conf.onprogress(e.loaded/e.total);
		}
	});
	xhr.addEventListener("load", function(e){
		conf.ondone(e);
	});
	xhr.addEventListener("error", function(e){
		conf.onerror(e);
	});

	xhr.open(conf.target[0], conf.target[1]);
	xhr.send();
};