셀렉트박스 readonly 기능 구현하기 (disabled 말구)
셀렉트 박스에서 이미 선택된 값을 출력하고 변경을 못하게 하고 싶을때 쓰면 유용합니다.
* disabled를 사용하게 되면 폼데이터를 컨트롤러로 보낼 수 없게됩니다.
* 당연히 아래 코드를 사용하면 데이터를 보낼 수 있습니다 ^^
샘플예제 입니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <select name="fruit" id="fruit" readonly style="background-color:#ababab" onFocus="this.initialSelect = this.selectedIndex;" onChange="this.selectedIndex = this.initialSelect;"> <option value=''>ALL</option> <option value='apple' selected>apple</option> <option value='banana'>banana</option> </select> |
selected 옵션의 apple이 기본으로 출력되고 다른 선택옵션을 클릭해도 변경되지 않습니다.
[JavaScript/JSP/JSTL]클라이언트 브라우저 정보 확인하기
안녕하세요 스탭코딩 게시글 작성자 페이퍼클립입니다.
웹이서 클라이언트가 사용하는 브라우저의 정보는 html의 header에 저장됩니다.
클라이언트의 브라우저 정보를 확인 하는 방법은 크게 3가지가 있습니다.
1. JavaScript를 이용한 정보 호출
1 2 3 4 5 6 | <head> <script> var userAgentInfo = window.navigator.userAgent; document.write(userAgentInfo); </script> </head> | cs |
2. JSP(java code)를 이용한 정보 호출
1 2 3 4 5 6 | <body> <% String userAgentInfo = request.getHeader("User-Agent"); out.print(userAgentInfo); %> </body> | cs |
3. JSTL을 이용한 정보 호출
1 2 3 4 5 6 7 8 | <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <body> <c:set var="userAgentInfo" value="${header['User-Agent']}" /> <c:out value="${userAgentInfo}" /> </body> </html> | cs |
[ 호출 결과 ]
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 |
저는 크롬으로 페이지(리소스)를 실행하여 위와 같은 결과를 얻었습니다. (브라우저별 호출 결과는 아래 링크한 모질라 홈페이지에서 확인 할 수 있습니다)
아래에 호출 결과를 분석하는 내용 추가했습니다.
내용과 저의 호출 결과를 보면 저의 브라우저는 모질라 기반으로 시스템은 원도우 NT 10.0 64비트 버전을 사용하고 있고 Gecko기반과 유사한 애플웹킷, 크롬, 사파리 중 하나의 브라우저를 사용한다는 의미입니다. 세 브라우저는 모우 호환가능 한것으로 판단됩니다.
- Mozilla/5.0 는 일반적으로 사용 브라우저가 모질라와 호환가능 함을 의미하며, 현재 대부분의 브라우저에 해당합니다.
- platform 은 브라우저가 실행중인 기본 플랫폼과 휴대전화(윈도우, 맥 리눅스, 안드로이드 등) 인지 여부를 나타냅니다. 파이어 폭스 OS폰은 단순히 Mobile이라고 표시됩니다. 플랫폼은 여러 개의 세미콜론으로 설명됩니다.
- rv:geckoversion은 Gecko의 출시 버전을 나타냅니다(예:"17.0"). 최근 브라우저에서 geckoversion은 파이어폭스 버전과 동일합니다.
- Gecko/geckotrail 은 브라우저가 Gecko을 기반으로한다는 것을 나타냅니다.
- 데스크톱에서 geckotrail 은 고정 문자열 "20100101"입니다.
- Firefox/firefoxversion은 브라우저가 Firefox입을 나타내며 "17.0"은 버전을 의미합니다.
검색중에 User-Agent와 관련해서 자세히 블로깅해 둔 페이지가 있어서 링크합니다. http://ohgyun.com/292
출처 : 모질라 (https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/User-Agent)
[HTML/COS]COS 를 이용해 파일 업로드 하기
안녕하세요 스탭코딩 게시글 작성자 페이퍼클립입니다.
HTML에서 파일을 업로드 하기 위해서는 cos.jar 파일이 필요합니다
http://www.servlets.com/cos/ 에서 다운 받으셔도 되고 첨부해둔 파일을 다운 받아도 됩니다.
cos.jar받은 파일은 프로젝트의 WEB_INF 아래 lib 폴더에 복사해 주세요
파일업로드를 위해 upload.jsp와 upload_result.jsp 파일을 준비했습니다.
[upload.jsp]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <%@ include file="../include/header.jsp"%> <script src="${pageContext.request.contextPath}/include/jquery-3.1.1.min.js"></script> <script> </script> </head> <body> <h2>파일 업로드 예제</h2> <form name="form1" method="post" enctype="multipart/form-data" action="upload_result.jsp"> 파일1 : <input type="file" name="file1"><br> 파일2 : <input type="file" name="file2"><br> <input type="submit" value="업로드"> </form> </body> </html> | cs |
[upload_result.jsp]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*"%> <%@ page import="java.io.*"%> <%@ page import="com.oreilly.servlet.*"%> <%@ page import="com.oreilly.servlet.multipart.*"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <%@ include file="../include/header.jsp"%> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <% String upload_path = "D:/upload"; int size = 10 * 1024 * 1024; String filename = "", filename2 = ""; int filesize = 0, filesize2 = 0; try { MultipartRequest multi = new MultipartRequest(request, upload_path, size, "utf-8", new DefaultFileRenamePolicy()); Enumeration files = multi.getFileNames(); String file1 = (String) files.nextElement(); String file2 = (String) files.nextElement(); filename = multi.getFilesystemName(file1); File f1 = multi.getFile(file1); filesize = (int) f1.length(); filename2 = multi.getFilesystemName(file2); File f2 = multi.getFile(file2); filesize2 = (int) f2.length(); } catch (Exception e) { e.printStackTrace(); } %> 파일1 이름 : <%=filename%><br> 파일1 크기 : <%=filesize%><br> 파일2 이름 : <%=filename2%><br> 파일2 크기 : <%=filesize2%><br> </body> </html> | cs |
[STEP1 form태그 작성하기]
파일 업로드를 위해 upload.jsp에서 form 태그를 작성합니다. cos.jar 파일을 이용해 파일을 업로드 하기 위해서는 반드시 method를 post 방식으로, 인코딩타입을 multipart/form-data로 해야 합니다. action 속성으로 버튼 클릭시 upload_result.jsp로 (데이터를 가지고)이동하게 합니다.
[STEP2 upload_result.jsp 임포트]
cos.jar 파일을 이용하기 위해서 <%@ page import="com.oreilly.servlet.*"%>와 <%@ page import="com.oreilly.servlet.multipart.*"%>를 임포트 합니다.
첨부파일을 받아 오기 위해 사용 될 File 클래스와 Enumeration 클래스를 위해 <%@ page import="java.util.*"%>와 <%@ page import="java.io.*"%>를 입포트 합니다.
[STEP3 MultipartRequest 객체 생성하기]
[STEP4 form에서 보낸 데이터 받아오기]
파일1 이름 : <%=filename%>
파일1 크기 : <%=filesize%>
