How to slow down upload

==> Execute the sleep command at the beginning of "server.php"

sleep(3);


About these events, "timeout", "error", "abort":

When one of those three events is raised, it will be followed by the "loadend" event.
But the "load" event will not be called.

How to trigger a XHR timeout event

To cause a timeout error, set a very short timeout to XHR such as 1 millisecond like

xhr.timeout=1;

You may also want to slow down the server using the PHP "sleep" command.

How to trigger a XHR error event

XHR.error seems to be called only when the client side(browser) has network problems.
Note shutting down the server won't trigger a XHR error event.
To trigger a XHR error event, try to access a domain that doesn't exist like
"www.-------------.com"

var url_server="http://www.-------------.com/";
xhreq=sendAjax(url_server,requ,function(resp){...

By the way, XHR does not seem to give any reasons for the error.

How to trigger a XHR abort event

Simply call XHR.abort();

「砂時計の2,3秒ほどのフリーズ」
以下のコードでは、ファイルのサイズが大きい場合は、砂時計が2,3秒ほどフリーズする。

var reader=new FileReader();
reader.addEventListener("load",function(){
	controlWaiting(false);//砂時計の削除
	controlDropArea(false);
	dataurl=reader.result;
	el_picboard.style["background-image"]="url("+dataurl+")";
});

原因はこのaddEventListenerの実行後も、ブラウザは画像のリサイズに忙しいため、
画面の再描画が後に遅れてしまう。その間は、すでに消した砂時計がそのまま画面に
残っているため、砂時計がフリーズしたように見えるのである。

以下のようにbeginとendをマークしてみる。

var reader=new FileReader();
// mark
console.log("begin");
reader.addEventListener("load",function(){
	controlWaiting(false);
	controlDropArea(false);
	dataurl=reader.result;
	el_picboard.style["background-image"]="url("+dataurl+")";
	// mark
	console.log("end");
});

endが表示された後、しばらくたってから画像が出てくる。この時間差が、ブラウザが画像のリサイズに費やしている時間である。

次にendの後にsetTimeoutを実行する。

var reader=new FileReader();
// mark
console.log("begin");
reader.addEventListener("load",function(){
	controlWaiting(false);
	controlDropArea(false);
	dataurl=reader.result;
	el_picboard.style["background-image"]="url("+dataurl+")";

	// mark
	console.log("end");
	setTimeout(function(){
		// mark
		console.log("timeout");
	},100);
});

timeoutがコンソールに表示されるのと、画像が表示されるのは、ほぼ同時である。
上記の例では、timeoutは100msで実行するが、この時間はさして重要ではない。
ブラウザが画像のリサイズを終了しなければ、timeoutの実行は後にまわされるからである。
これが、timeoutがコンソールに表示されるのと、画像が表示されるのが、ほぼ同時
になる理由である。

結論として、砂時計の終了をtimeout内で行うと、画像が表示されるまで、
砂時計がフリーズせずに動くのである。

var reader=new FileReader();
reader.addEventListener("load",function(){
	dataurl=reader.result;
	el_picboard.style["background-image"]="url("+dataurl+")";
	setTimeout(function(){
		controlWaiting(false);
		controlDropArea(false);
	},100);
});