<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head> 
		<meta charset="UTF-8">
		<title>ระบบแจ้งปัญหาห้องน้ำ อหท.</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    	<meta name='apple-mobile-web-app-capable' content='yes' />
		
	</head>

	<body>

		<div class="header" style="background-color: rgba(0,0,0,0);">
			<div class="logo">
				<center> 
					<table border="0" cellspacing="0" cellpadding="0" >
						<tr>
							<td height="40">
								<img src="img/fmd.png">	
							</td>
							<td>
								ระบบแจ้งปัญหาห้องน้ำ 
								<b><font color="red">อหท.</font></b>
							</td>
						</tr>
					</table>
				     
					
				</center>
			</div>
			
		</div>
		<div style="width: auto; height: 50px;">
			
		</div>
		<div class="data">
			<div class="CONTACT">	
				<h3>
					<center>ปัญหา</center> 
				</h3>
				<div class="CONTACT_from" >
					<center>
						<table border="0" width="100%">
							<tr>
								<td valign="middle" height="200">
									<center>
										<div id="image_file" style="display : block;">
											<input name="image_file" id="imageInput" type="file" accept=".png, .jpg, .jpeg, .gif" />
										<button onclick="javascript:start_upload();">อัพโหลด</button>
										</div>
										<div id="loading">
											<div id="loadingup"></div>
										</div>
									</center>
								</td>
							</tr>
						</table>
					</center>
				</div>
				
			</div>				
		</div>
		
		<script type="text/javascript">
			var image_file = document.getElementById("image_file");
			var loading = document.getElementById("loading");
			var loadingup = document.getElementById("loadingup");
			
			
			function start_upload(){

				var fsize = $('#imageInput')[0].files[0].size; //get file size
 				var ftype = $('#imageInput')[0].files[0].type;// get file type
				
				if(fsize>0){
					if( ftype=='image/png' || ftype=='image/gif' || ftype=='image/jpeg' || ftype=='image/pjpeg'){
						if(fsize > (5*1048576)){
							alert('ไฟล์รูปภาพขนาดเกิน 5 MB');
						}else{
							loading.style.display = "block";
							image_file.style.display = "none";
							var fd = new FormData();
					        var files = $('#imageInput')[0].files[0];
					        fd.append('file',files);

					        $.ajax({
					            url: 'upload.php',
					            type: 'post',
					            data: fd,
					            contentType: false,
					            processData: false,
					            xhr: function () {
					            	var xhr = new window.XMLHttpRequest();
									//Upload progress
									xhr.upload.addEventListener("progress", function(evt){
										if (evt.lengthComputable) {
									 		var percentComplete = evt.loaded / evt.total;
											//Do something with upload progress
											//loadingup.style.width = (percentComplete*100);
											loadingup.style.width = (Math.round(percentComplete * 100) + "%");
										}
									}, false);
										//Download progress
									xhr.addEventListener("progress", function(evt){
										if (evt.lengthComputable) {
											var percentComplete = evt.loaded / evt.total;
											//Do something with download progress
											//loadingup.style.width = (percentComplete*100);
											loadingup.style.width = (Math.round(percentComplete * 100) + "%");
										}
									}, false);
									return xhr;
								},
					            success: function(result){			                
					                alert('อัพรูปภาพแล้ว');
					            },
					        });
						}
					}else{
						alert('กรุณาเลือกไฟล์รูปภาพ');
					}
				}else{
					alert('ไม่ได้เลือกรูปภาพ');
				}
			}

		</script>
		
		<div class="footer">
			แผนกบริการกลาง กองบริการทั่วไป ฝ่ายบริหารและจัดการทรัพยากร ท.116 ชั้น 2 Tel: 024363630 Fax: 024365297
		</div>
		<div class="background_imag"></div>
		
	</body>
</html>