Spaces:

tekville
/

demo

Sleeping

App Files Files Community

demo / app /templates /upload.html

tekville

Initial commit

ff72db3 4 months ago

raw

history blame contribute delete

4.08 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>파일 업로드</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	margin: 0;
	padding: 0;
	}
	.container {
	width: 50%;
	margin: 50px auto;
	padding: 20px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	input[type="file"] {
	margin: 10px 0;
	padding: 10px;
	}
	button {
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	}
	button:hover {
	background-color: #0056b3;
	}
	.status {
	margin-top: 20px;
	text-align: left;
	font-size: 14px;
	}
	.status p {
	background-color: #e9f4ff;
	border-left: 4px solid #007bff;
	padding: 10px;
	margin: 5px 0;
	}
	nav {
	background-color: #333;
	padding: 10px;
	text-align: center;
	}
	nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	}
	nav ul li {
	display: inline;
	margin: 0 15px;
	}
	nav ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	}
	nav ul li a:hover {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li><a href="/search">문서 검색</a></li>
	<li><a href="/">파일 업로드</a></li>
	</ul>
	</nav>
	</header>
	<div class="container">
	<h2>파일 업로드</h2>
	<form id="upload-form" enctype="multipart/form-data">
	<input type="file" name="file" required>
	<button type="submit">업로드</button>
	</form>
	<div class="status" id="status">
	<h3>업로드 상태</h3>
	</div>
	</div>

	<script>
	const form = document.getElementById('upload-form');
	const statusDiv = document.getElementById('status');
	const userId = "user123"; // 고유 사용자 ID (동적으로 설정 가능)

	// WebSocket 설정
	const socket = new WebSocket(`ws://127.0.0.1:8000/ws/${userId}`);

	socket.onmessage = (event) => {
	const message = event.data;
	const p = document.createElement('p');
	p.textContent = message;
	statusDiv.appendChild(p);
	};

	socket.onerror = () => {
	const p = document.createElement('p');
	p.textContent = "WebSocket 연결 오류.";
	p.style.color = "red";
	statusDiv.appendChild(p);
	};

	form.addEventListener('submit', async (e) => {
	e.preventDefault();
	statusDiv.innerHTML = '<h3>업로드 상태</h3>';
	const formData = new FormData(form);


	// 파일 업로드 요청
	const response = await fetch(`/uploadfile/${userId}/`, {
	method: "POST",
	body: formData,
	});

	if (response.ok) {
	const p = document.createElement('p');
	p.textContent = "파일 업로드 성공!";
	statusDiv.appendChild(p);
	} else {
	const p = document.createElement('p');
	p.textContent = "파일 업로드 실패.";
	p.style.color = "red";
	statusDiv.appendChild(p);
	}
	});
	</script>
	</body>
	</html>