<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>アップロード/経過表示+複数選択</title>
</head>
<body>

<div style="margin-left: 4em; text-indent: -4em;">
[php.ini]の設定<br>
	upload_max_filesize = <?php echo ini_get("upload_max_filesize"); ?><br>
	post_max_size = <?php echo ini_get("post_max_size"); ?><br>
	memory_limit = <?php echo ini_get("memory_limit"); ?><br>
</div>
<br>


<form id="f1">
	<input type="file" id="file1" name="file1" multiple>
	<button type="button" onclick="file_upload()">アップロード</button>
</form>
<span id="Msg1"></span><br>
<span id="Msg2"></span><br>
<span id="Msg3"></span><br>
<span id="Msg4"></span><br>
<span id="Msg5"></span><br>

<script language="JavaScript">
	
	function file_upload()
	{
		
		// XMLHttpRequestによるアップロード処理
		var xhr = new XMLHttpRequest();

		//xhr.addEventListener("progress", updateProgress);
		document.getElementById("Msg1").innerHTML = "";
		document.getElementById("Msg2").innerHTML = "";
		document.getElementById("Msg3").innerHTML = "";
		document.getElementById("Msg4").innerHTML = "";
		document.getElementById("Msg5").innerHTML = "";

		// フォームデータを取得
		var formdata = new FormData( document.getElementById('f1') );

		xhr.onloadstart = function() {
			document.getElementById("Msg1").innerHTML = "開始";
		}

		xhr.upload.onprogress = function(event) {
			document.getElementById("Msg2").innerHTML += ".";

			if (event.lengthComputable) {
				var percentComplete = event.loaded / event.total * 100;
				document.getElementById("Msg3").innerHTML = percentComplete + '%';
			} else {
				// 全サイズ不明
			}

		}

		xhr.onerror = function() {
			document.getElementById("Msg4").innerHTML = "失敗";
		}

		xhr.onload = function() {
			document.getElementById("Msg4").innerHTML = "成功";
		}

		xhr.onloadend = function() {
			document.getElementById("Msg5").innerHTML = "終了:" + xhr.readyState + "<br>";
			document.getElementById("Msg5").innerHTML += xhr.responseText;
		}
		
		xhr.open("POST", "post4.php", true);

		const input_file = document.querySelector('input[name=file1]');

		var fileno = 0;
		formdata.delete('file1');
		for(let f of input_file.files){
			fileno++;
			formdata.append('uploadfile' + fileno , f);
		}
		
		xhr.send(formdata);
		
	}


</script>

</body>
</html>
<< 広告 >>