디지털 컨버전스/Java Script

[JS] 파일 업로드 추가하기

gimyeondong 2020. 6. 22. 16:18 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>
<script>
	var file_count = 1;
	$(function() {

		$("a[name='fileDelete']").on("click", function(e) {
			e.preventDefault();
			$(this).parent().remove();
		})
		$("#fileAdd")
				.on(
						"click",
						function(e) {
							e.preventDefault();
							
									var str = "<p><input type='file' name='files'/><a href='#this' name='fileDelete' class='btn'>삭제하기</a></p> ";
								
							$("#fileDiv").append(str);

							$("a[name='fileDelete']").on("click", function(e) {
								e.preventDefault();
								$(this).parent().remove();
							})
						})

	})
    </script>
    
<body>
    <div class="col-12">
					<a href="#this" id="fileAdd" class="btn">파일 추가하기</a>
					</div>
					<div class="col-12" id="fileDiv">
						<p>
							<input type="file" name="files" /><a href="#this"
								name="fileDelete" class="btn">삭제하기</a>
						</p>
					</div>
</body>
</html>