Data Scientist 옌

매일 발전하는 IT문제해결사

국비지원교육 (22.01-22.07)/강의노트

22-04-14(목) 054일차 [HTML, JSP, JavaScript] 디렉토리 세팅, 폼 태그 GET, POST 속성 값, enctype의 속성값, 바이너리 이미지파일 업로드

옌炎 2022. 6. 5. 19:30
728x90

수업내용

1교시 (09:30-10:20)

  • 지난 시간 복습
    • checkbox_js.jsp
    • checkbox_jquery.jsp

2교시 (10:30-11:20)

  • 컨텍스트
    컨텍스트란 ???
    =====================================
    servler.xml 
    --------------------------------
    <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">

    <!-- SingleSignOn valve, share authentication between web applications
     Documentation at: /docs/config/valve.html -->
    <!--
    <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
    -->

    <!-- Access log processes all example.
     Documentation at: /docs/config/valve.html
     Note: The pattern used is equivalent to using pattern="common" -->
    <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" pattern="%h %l %u %t &quot;%r&quot; %s %b" prefix="localhost_access_log" suffix=".txt"/>

    <Context docBase="kosMember" path="/kosMember" reloadable="true" source="org.eclipse.jst.jee.server:kosMember"/>
    <Context docBase="aContext" path="/aContext" reloadable="true" source="org.eclipse.jst.jee.server:aContext"/>
    <Context docBase="bContext" path="/bContext" reloadable="true" source="org.eclipse.jst.jee.server:bContext"/>
    </Host>

    localhost 호스트 서버에

    컨텍스트가 3개 있다.
    KosMember Context
    aContext Context
    bContext Context

    웹 프로젝트가 3개
    KosMember 웹 프로젝트 
    aContext 웹 프로젝트
    bContext 웹 프로젝트

    Web Application 3개
    KosMember Web Application
    aContext Web Applicaion
    bContext Web Application

    도메인 3개

    프로젝트 3개
    KosMember 웹 프로젝트 
    aContext 웹 프로젝트
    bContext 웹 프로젝트

    *.war 3개 있다.
    KosMember.war
    aContext.war
    bContext.war

    C:\00.KOSMO108\30.Web\eclipse_web_1_work\KosMember
    C:\00.KOSMO108\30.Web\eclipse_web_1_work\aContext
    C:\00.KOSMO108\30.Web\eclipse_web_1_work\bContext

    C:\00.KOSMO108\30.Web\eclipse_web_1_work\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\webapps\KosMember
    C:\00.KOSMO108\30.Web\eclipse_web_1_work\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\webapps\aContext
    C:\00.KOSMO108\30.Web\eclipse_web_1_work\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\webapps\bContext
  • 어제 했던 request_test.jsp
    // pageContext : KosMember, path 가져오기
    String context_path = pageContext.getServletContext().getRealPath("/");

3교시 (11:30-12:20)

  • file.jsp ← 파일 업로드
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="java.io.DataInputStream" %>
<%@ page import="java.util.Enumeration" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD JSP</title>
</head>

<body>
	<h3>FILE UPLOAD JSP</h3>
	<hr>
	<h3>enctype="multipart/form"</h3>
	<h3>file 업로드 데이터는 request.getParameter() 받을 수 없다.</h3>
	<hr>
	<%
		String name = request.getParameter("name");
		String fileupload = request.getParameter("fileupload");
		out.println("name >>> : " + name + "<br>");
		out.println("fileupload >>> : " + fileupload + "<br>");
		out.println("<p>");
	%>
	
	<h3>스트림 방식으로 받기</h3>
	<hr>
	<% request.setCharacterEncoding("UTF-8"); %>
	<%
		Enumeration<String> en = request.getHeaderNames();
		out.println("<h4>전송받은 헤더 정보 출력</h4>");
		while (en.hasMoreElements()){
			String headerName = en.nextElement();
			String headerValue = request.getHeader(headerName);
			out.println(headerName + " : " + headerValue + "<br>");
		}
		
		out.println("<br> <h4>전송받은 데이터 출력</h4>");
		
		ServletInputStream sis = request.getInputStream();
		DataInputStream dis = new DataInputStream(sis);
		String line = "";
		
		while ((line = dis.readLine()) != null) {
			out.println(new String(line.getBytes("ISO-8859-1"), "UTF-8") + "<br>");
		}
	%>
</body>
</html>
  • file.html ← 함수 버전
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD</title>
</head>

<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	<form 	name="fileForm"
			action="/KosMember/Kos_fileupload/file.jsp"
			method="POST"
			enctype="multipart/form-data">

		<input type="text" name="name"/><br>
		<input type="file" name="fileupload"/><br>
		<input type="submit" value="전송"/><br>
	</form>
</body>
</html>
  • file.html ← jQuery 버전
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD</title>
	
	<!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function(){
			
			$("#sbmt_btn").click(function(){
				
				$("#fileForm").attr({
					"action":"/KosMember/kos_fileupload/file.jsp",
					"method":"POST",
					"enctype":"multipart/form-data"
				}).submit();
			});
		});
	</script>

</head>

<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	<form	name="fileForm"
			id="fileForm">
		<!-- 
			action="/KosMember/kos_fileupload/file.jsp"
			method="post"
			enctype="multipart/form-data">
		-->
		<input type="text" name="name"/><br>
		<input type="file" name="fileupload"/><br>
		<!-- <input type="submit" value="전송"/><br> --> 
		<input type="button" id="sbmt_btn" value="전송" /><br>
	</form>
</body>
</html>

파일 선택으로 파일을 올린 후 전송 클릭 시

4교시 (12:30-13:20)

  • HTTP 프로토콜
    HTTP 프로토콜 요청/응답 프로토콜 구조
    ----------------------------------
    Request Line
    HTTP Header : HEADER
    Empty Line
    Message Body : BODY

    MEssage Body 들어가는 데이터 타입을
    HTTP Header Content-type 필드에 적어준다.


    ----------------------------------------------
    Content-type
    ------------------
    Content-Type 개체 헤더는 리소스의 media type을 나타내기 위해 사용됩니다.

    문법
    Content-Type: text/html; charset=utf-8
    Content-Type: multipart/form-data; boundary=somethin

    media-type
    리소스 혹은 데이터의 MIME type.
    charset
    문자 인코딩 표준
    boundary
    멀티파트 개체에 대해 boundary 디렉티브는 필수인데,
    이메일 게이트를 통해 매우 탄탄해졌다고 알려진 캐릭터셋의 1~70개의 문자들로 구성되며,
    빈 공백으로 끝나지 않습니다.
    이는 메시지의 멀티 파트 경계선을 캡슐화하기 위해 사용됩니다.
    ----------------------------------------------

    form 속성
    ---------------
    name : form의 이름, 서버로 보내질 떄 이름의 값으로 데이터 전송한다.
    action : form이 전송되는 서버 url 또는 html 링크.
    method : 전송 방법 설정. GET default / POST
    enctype : 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시한다.

    POST
    ---------
    HTTP POST 메서드는 서버로 데이터를 전송합니다.
    요청 본문의 유형은 Content-Type 헤더로 내타냅니다.

    POST 방식 사용하기
    -----------------
    기존 리소스에 주석달기
    게시판, 뉴스 그룹, 메일링 리스트나 이와 유사한 시스템에 글 올리기
    회원 가입 모달로 새로운 사용자 추가하기
    양식 전송 결과 등 데이터 블록을 데이터 처리 프로세스에 보내기
    이어붙이기 연산을 통한 데이터베이스 확장

    enctype attribute 속성값
    ---------------------------
    application/x-www-form-urlencoded
    &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-vale tuple로 인코딩되는 값입니다.
    영어 알파벳이 아닌 문자들은 percent encoded으로 인코딩됩니다.
    content type은 바이너리 데이터에 사용하기에는 적절치 않습니다.
    multipart/form-data
    파일이나 이미지를 서버로 전송할 때 주로 사용
    text/plain
    공백 문자(space)는 "+" 기호로 변환,
    나머지 문자는 모두 인코딩되지 않음

5교시 (14:30-15:20)

  • filecontent.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<h3>Content-type 분기</h3>
	<hr>
	<%
		String getMethod = request.getMethod();
		System.out.println("getMethod >>> : " + getMethod);
		out.println("getMethod >>> : " + getMethod + "<br>");
		
		if ("POST".equals(request.getMethod().toUpperCase())) {
			
			String type = request.getHeader("Content-Type");
			System.out.println("type >>> : " + type);
			out.println("type >>> : " + type + "<br>");
			// content-type : multipart/form-data;
			// boundary=----WebKitFormBoundary3AsAwwoCZ7JWRZBA
					
			boolean bool = type.startsWith("multipart/form-data");
			System.out.println("bool >>> : " + bool);
			out.println("bool >>> : " + bool + "<br>");
			
			if (type != null && type.startsWith("multipart/form-data")) {
				System.out.println("파일 업로드 시작 루틴");
				out.println("파일 업로드 시작 루틴");
			} else {
				System.out.println("multipart/form-data에 오타가 있어요.");
				out.println("multipart/form-data에 오타가 있어요.");
			}
		} else {
			System.out.println("파일 업로드는 POST 방식으로 요청해야 합니다.");
			out.println("파일 업로드는 POST 방식으로 요청해야 합니다.");
		}
	%>
</body>
</html>
  • filecontent.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD</title>
</head>

<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	
	<form	name="fileForm"
			action="/KosMember/kos_fileupload/filecontent.jsp"
			method="POST"
			enctype="multipart/form-data">
		<input type="text" name="name"/><br>
		<input type="file" name="fileupload"/><br>
		<input type="submit" value="POST 전송"/><br>	
	</form>
	
	<form	name="fileForm_1"
			action="/KosMember/kos_fileupload/filecontent.jsp"
			method="GET"
			enctype="application/x-www-form-urlencoded">
		<input type="text" name="name"/><br>
		<input type="file" name="fileupload"/><br>
		<input type="submit" value="GET 전송"/><br>
	</form>
</body>
</html>

POST 전송

 

GET 전송

  • filecontent.html ←jQuery 버전

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>>FILE UPLOAD</title>
<!-- jQuery CDN 불러오기  -------------------------------------------->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

	$(document).ready(function(){
		
		$(document).on('click', '#getBtn', function(){
		
			$('#fileForm').attr({
				"action":"/kosMember/kos_fileupload/filecontent.jsp",
				"method":"GET",
				"enctype":"application/x-www-form-urlencoded"
			}).submit();
		});
		
		$(document).on('click', '#postBtn', function(){
			
			$('#fileForm').attr({
				"action":"/kosMember/kos_fileupload/filecontent.jsp",
				"method":"POST",
				"enctype":"multipart/form-data"
			}).submit();
		});
	});
</script>
<style type="text/css">

	.wrap {
		border: 1px solid red;
		width: 300px;
		height: 200px;
		margin: 100px auto;
	}
	
	table {
		width: 80%;
		height: 50%;
		margin: auto;
	}
	
	h3, hr {
		text-align: center;
	}
</style>
</head>
<body>
<div class="wrap">
<h3>FILE UPLOAD</h3>
<hr>
<form name="fileForm" id="fileForm">
<table>
	<tr>
		<td>
			<input type="text" name="name"/>
		</td>
	</tr>	
	<tr>
		<td>
			<input type="file" name="fileupload"/>
		</td>
	</tr>	
	<tr>
		<td>
			<input type="button" id="getBtn" value="GET"/>
			<input type="button" id="postBtn" value="POST"/>
		</td>
	</tr>	
</table>
</form>
</div>
</body>
</html>

6교시 (15:30-16:20)

  • filecontent_1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="java.io.File" %>
    
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<body>
	<h3>Content-type 분기</h3>
	<hr>
	<%
		String getMethod = request.getMethod();
		System.out.println("getMethod >>> : " + getMethod);
		out.println("getMethod >>> : " + getMethod + "<br>");
		
		String name = request.getParameter("name");
		String fileupload = request.getParameter("fileupload");
			
		System.out.println("name >>> : " + name);
		System.out.println("fileupload >>> : " + fileupload);
	
		out.println("name >>> : " + name + "<br>");
		out.println("fileupload >>> : " + fileupload + "<br>");
		
	%>	
</body>
</html>
  • filecontent_get.html ← 어떤 enctype이든 GET 방식은 글자만 넘어감
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD</title>
</head>

<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	<form 	name="fileForm"
			action="/KosMember/kos_fileupload/filecontent_1.jsp"
		 	method="GET"
		 	enctype="multipart/form-data">
			<!--  
				application/x-www-form-urlencoded
				multipart/form-data
			-->
		<input type="text" name="name"/><br>
		<input type="file" name="fileupload"/><br>
		<input type="submit" value="전송"/><br>
	</form>
</body>
</html>

enctype="application/x-www-form-urlencoded”일 때
enctype=”enctype="multipart/form-data”일 때

  • filecontent_post.html ← 꼭 enctype=”multipart/form-data”이어야 함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FILE UPLOAD</title>
</head>
<body>
<h3>FILE UPLOAD</h3>
<hr>
<form 	name="fileForm"
		action="/KosMember/kos_fileupload/filecontent_1.jsp"
	 	method="POST"
	 	enctype="multipart/form-data">
		<!--  
			application/x-www-form-urlencoded
			multipart/form-data
		-->
<input type="text" name="name"/><br>
<input type="file" name="fileupload"/><br>
<input type="submit" value="전송"/><br>
</form>
</body>
</html>

enctype="application/x-www-form-urlencoded”일 때
enctype="multipart/form-data”일 때

file 업로드 데이터는 request.getParameter() 받을 수 없기 때문에 null이 뜸. 옳은 방법

7교시 (16:30-17:20)

  • fileupload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- cos 파일 업로드 라이브러리 객체 import --%>
<%@ page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>

<%-- log4j 관련 객체 --%>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>

<%@ page import="java.io.File" %>
<%@ page import="java.util.Enumeration" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD JSP</title>
</head>
<body>
	<h3>FILE UPLOAD JSP</h3>
	Context Root 컨텍스트 루트 : /KosMember<br>
	pageContext.getServletContext().getRealPath() ==> <br>
	C:\00.KOSMO108\30.Web\eclipse_web_1_work\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\webapps\KosMember
	<hr>
	
	<%
		Logger logger = LogManager.getLogger(this.getClass());
		logger.info("fileupload.jsp 페이지 >>> : ");
		
		// 현업에서 이렇게 직접 경로 지정은 흔치 않음
		String saveDirectory = pageContext.getServletContext().getRealPath("/upload/aaaa/");
		logger.info("saveDirectory >>> : " + saveDirectory);
		out.println("saveDirectory >>> : " + saveDirectory + "<br>");
		
		File saveDir = new File(saveDirectory);
		if (!saveDir.exists()) {
			saveDir.mkdirs();
		}
		
		int maxPostSize = 1024 * 1024 * 5; // 5MB : byte 단위
		String encoding = "UTF-8";
		String filename1 = "";
		String filename2 = "";
		
		try {
			out.println("request 내장형 오브젝트로 받아온 스트림을 <br>");
			out.println("MultipartRequest 클래스 생성자 매개변수로 바인딩 한다. <br>");
			out.println("MultipartRequest mr = new MultipartRequest(request,"+"<br>");
			
			MultipartRequest mr = new MultipartRequest(  request
														,saveDirectory
														,maxPostSize
														,encoding
														,new DefaultFileRenamePolicy());
			logger.info("mr >>> : " + mr + "mr 참조변수가 출력되면 인스턴스가 완료되었다. 파일 업로드가 완료되었다. <br>");
			out.println("mr >>> : " + mr + "mr 참조변수가 출력되면 인스턴스가 완료되었다. 파일 업로드가 완료되었다. <br>");
			
			out.println("mr 참조변수 가지고 서버에 업로드된 파일 정보. <br>");
			
			// name
			String name = mr.getParameter("name");
			
			// file
			Enumeration<String> files = mr.getFileNames();
			String file1 = String.valueOf(files.nextElement());
			filename1 = mr.getFilesystemName(file1);
			String file2 = String.valueOf(files.nextElement());
			filename2 = mr.getFilesystemName(file2);
			
			logger.info("name >>> : " + name);
			logger.info("filename1 >>> : " + filename1);
			logger.info("filename2 >>> : " + filename2);
			
			out.println("name >>> : " + name + "<br>");		
			out.println("filename1 >>> : " + filename1 + "<br>");		
			out.println("filename2 >>> : " + filename2 + "<br>");
			
		} catch (Exception e) {
			logger.info("에러가 >>> : " + e.getMessage());
		}
	%>
	
	<h3>File Upload Testing</h3>
	<hr>
	<!-- html img 태그의 src 경로 속성은 웹 경로를 사용한다. -->
	<table border="1">
		<tr align="center">
			<td><%= filename1%></td>
			<td>
				<img src="/KosMember/upload/aaa/<%= filename1%>" width="30" height="30"><br>
			</td>
		</tr>
		<tr>
			<td><%= filename2 %></td>
			<td>
				<img src="/KosMember/upload/aaa<%= filename2%>" width="30" height="30"><br>
			</td>
		</tr>
	</table>
</body>
</html>
  • fileupload.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FileUpload</title>
</head>
<!-- 
	파일 업로드
	1.  method : POST
		enctype : multipart/form-data
	2.  파일업로드 컴포넌트 포팅
		Context/WebContent/WEB-INF/lib/cos.jar
	3. MultipartRequest mr = new MultipartRequest( request
												  ,saveDirectory
												  ,maxPostSize
												  ,encoding
												  ,new DefaultFileRenamePolicy());
	4.  upload 파일 저장 디렉토리
		탐캣 서버 + 이클립스 + 다이나믹 웹 프로젝트를 사용할 때는 .metdate 경로를 이용한다.
		was, 환경이 변경되면 같이 변경을 해야 한다.
	5.  cos.jar 다운로드
		http://servlets.com/
			왼쪽 링크 : COS File Upload Library 링크 클릭
			아래쪽 Download에서
			cos-20.08.zip 다운로드 하기
 -->
<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	<form	name="fileUploadForm"
			action="/KosMember/kos_fileupload/fileupload.jsp"
			method="POST"
	 		enctype="multipart/form-data">

		이름 : <input type="text" name="name"/><br>
		파일1 : <input type="file" name="fileName1"/><br>
		파일2 : <input type="file" name="fileName2"/><br>
		<input type="submit" value="전송">
	</form>
</body>
</html>

  • commonUtils.java
package a.b.c.common;

public class CommonUtils {
	
	// 테스트 이미지 업로드
	public static final String TEST_IMG_UPLOAD_PATH = "C:\\00.KOSMO108\\30.Web\\eclipse_web_1_work\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\KosMember\\upload\\aaaa";
	public static final int	   TEST_IMG_FILE_SIZE = 1024 * 1024 * 10;
	public static final String TEST_IMG_ENCODE = "UTF-8";

}
  • fileupload_1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- cos 파일 업로드 라이브러리 객체 import --%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>

<%-- log4j 관련 객체 import --%>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>

<%@ page import="java.io.File" %>
<%@ page import="java.util.Enumeration" %>

<%@ page import="a.b.c.common.CommonUtils" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FILE UPLOAD JSP</title>
	<style type="text/css">
	
		#circle { border-radius: 50%; }
	
	</style>
</head>
<body>
	<h3>FILE UPLOAD JSP</h3>
	<hr>
	<%
		Logger logger = LogManager.getLogger(this.getClass());
		logger.info("fileupload_1.jsp 페이지 >>> : ");
		
		String saveDirectory = CommonUtils.TEST_IMG_UPLOAD_PATH;
		logger.info("saveDirectory >>> : " + saveDirectory);
		out.println("saveDirectory >>> : " + saveDirectory + "<br>");
		
		int maxPostSize = CommonUtils.TEST_IMG_FILE_SIZE; // 10MB : byte 단위
		String encoding = CommonUtils.TEST_IMG_ENCODE;
		String filename1 = "";
		String filename2 = "";
		
		try {
			
			MultipartRequest mr = new MultipartRequest(  request
														,saveDirectory
														,maxPostSize
														,encoding
														,new DefaultFileRenamePolicy());
			
			// name
			String name = mr.getParameter("name");
			
			// file
			Enumeration<String> files = mr.getFileNames();
			
			String file1 = String.valueOf(files.nextElement());
			filename1 = mr.getFilesystemName(file1);
			
			String file2 = String.valueOf(files.nextElement());
			filename2 = mr.getFilesystemName(file2);
			
			logger.info("name >>> : " + name);		
			logger.info("filename1 >>> : " + filename1);
			logger.info("filename2 >>> : " + filename2);
			
			out.println("name >>> : " + name + "<br>");		
			out.println("filename1 >>> : " + filename1 + "<br>");		
			out.println("filename2 >>> : " + filename2 + "<br>");
			
		} catch (Exception e) {
			logger.info("에러가 >>> : " + e.getMessage());
		}
	%>
	
	<h3>File Upload Testing</h3>
	<hr>
	<table border="1">
		<tr align="center">
			<td><%= filename1 %></td>
			<td>
				<img id="circle" src="/KosMember/upload/aaaa/<%= filename1 %>" width="100" height="100"><br>
			</td>
		</tr>
		<tr>
			<td><%= filename2 %></td>
			<td>
				<img src="/KosMember/upload/aaaa/<%= filename2 %>" width="50" height="50"><br>
			</td>
		</tr>
	</table>
</body>
</html>
  • fileupload_1.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>FileUpload</title>
</head>

<body>
	<h3>FILE UPLOAD</h3>
	<hr>
	<form	name="fileUploadForm"
			action="/KosMember/kos_fileupload/fileupload_1.jsp"
			method="POST"
			enctype="multipart/form-data">
		이름 :	<input type="text" name="name" /><br>
		파일1 : 	<input type="file" name="filename1" /><br>
		파일2 :	<input type="file" name="filename2" /><br>
		<input type="submit" value="전송">
	</form>
</body>
</html>

8교시 (17:30-18:30)

  • 자습

Notes

728x90
저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-04-18(월) 056일차 [HTML, JavaScript, JSP] 이미지 조정 및 데이터 넘기기  (0) 2022.06.14
22-04-15(금) 055일차 [Oracle, HTML, JavaScript] 파일 업로드  (0) 2022.06.05
22-04-13(수) 053일차 [Oracle, HTML, JavaScript] 데이터 받기, 로그인 페이지 만들기  (0) 2022.06.03
22-04-12(화) 052일차 [HTML, JavaScript] 페이지 이동  (0) 2022.06.03
22-04-11(월) 051일차 [HTML, JavaScript] jQuery 페이지 넘어가기, RequestDispatcher  (0) 2022.06.03

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

  • 현재글22-04-14(목) 054일차 [HTML, JSP, JavaScript] 디렉토리 세팅, 폼 태그 GET, POST 속성 값, enctype의 속성값, 바이너리 이미지파일 업로드

관련글

댓글

티스토리툴바