|
|
language/jquery 2013. 12. 13. 11:18
원글 :: http://linguist79.tistory.com/965
파일업로드를 구현시 많은 방법들이 있겠지만, 그넘의 웹표준땜에 플래시를 쓰기가 자꾸 망설여집니다. 언제까지 지원할지도 모르고... 현재 사용하는 파일전송폼은 태생적인 한계가 있습니다.
익스프로러를 시작으로 크롬 등의 브라우저가 보안상의 이유로 파일경로를 차단했습니다. input폼에 파일을 넣고 값을 추측해봐도 경로가 안나오는 문제가 생긴거죠. 즉, fakePath 문제 입니다.(보안상의 이유로 전체경로가 전혀 보이지 않으며 값이 나타나지 않습니다) 익스프로러에서는 사용자가 옵션에 따라서 조절할 수 있지만, 근본적인 측면에서는 막혀있습니다. 자바스크립트나, Html상에서 해결할 방법은 전혀 없습니다. 이미지파일을 파일폼에 첨부하고 경로를 이용해서 본문에 첨부를 할려고 했지만 구현이 안되더군요 대안으로 플래시업로더를 사용하거나, 서버로 파일을 올린뒤 링크를 거는 방법을 택했습니다. 비동기식전송은 폼에서 파일을 선택할때 파일을 서버에 올리고 바로 값을 가져올 수 있기에 무척유용합니다. 더불어 프로그레스바를 추가해서 보다더 액티브한 폼을 만들 수 있으며, 무엇보다 표준이라는게 맘에 듭니다. jQuery의 jquery.form.js와 json_sans_eval.js를 이용해서 파일을 전송하고 제이슨으로 리턴값을 받습니다. 첨부파일 기본폼 소스 <%@ page language="java" contentType="text/html;charset=euc-kr" session="true" %>
<html>
<head>
<!-- 폼전송시 사용할 js -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 파싱시 사용할 js -->
<script language="javascript" src = "json_sans_eval.js"></script>
<script type="text/javascript">
//파일전송 후 콜백 함수
function ImguploadCallback(data,state){
if (state=="error"){
alert("이미지 전송중 예외가 발생하였습니다.\n관리자에게 문의해주세요.");
return false;
}
//uploadImg.jsp에서 리턴받을 데이터가 있을경우 파싱사용
//json_sans_eval.js 파일 script에 포함하지 않으면 예외발생
try{
var result = jsonParse(data);
}catch(e){
alert(data);
alert("서버데이터 파싱 실패");
return;
}
//서버에서 넘어온 파일명 출력 JSON문자열로 지정한 데이터를 속성처럼 사용가능합니다.
alert("여기가 비동기 영역이지???");
alert(result.fileName);
alert(result.fileImgTag);
alert(result.fileSystem);
alert(result.fileNamePath);
}
$(function(){
//비동기 파일 폼전송
var frm=$('#imgForm');
frm.ajaxForm(ImguploadCallback); //파일전송 후 실행할 콜백함수 지정
frm.submit(function(){return false;});
});
// 파일업로드 이벤트
function FileUploaded(){
//폼전송
var frm;
frm = $('#imgForm');
frm.attr("action","uploadImg.jsp");
frm.submit();
}
</script>
</head>
<body>
<form id="imgForm" enctype="multipart/form-data" method="post">
<input type="file" name="file1" >
<br>
<input type="button" onclick="FileUploaded()" value="폼전송">
</form>
</body>
</html>
파일업로드를 처리하는 부분 소스
<%@ page contentType="text/html;charset=euc-kr" %>
<%@ page import="com.oreilly.servlet.MultipartRequest,com.oreilly.servlet.multipart.DefaultFileRenamePolicy,java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="org.apache.commons.lang.StringUtils" %>
<%
MultipartRequest up = null;
//업로드될 경로
String path = "c:/upload";
String original = null;
String filename = null;
//넘어온 파일을 저장할 파일객체
File f1 = null;
String fileName = null;
String fileImgTag = null;
String fileSystem = null;
String fileNamePath = null;
try{
int size = 10*1024*1024 ; // 업로드 제한 사이즈
//DefaultFileRenamePolicy는 같은 파일명이 업로드될시 ex) 1.jpg일 경우 2.jpg 11.jpg 이런식으로 변경되어 저장됩니다.
up=new MultipartRequest(request, path, size, "euc-kr", new DefaultFileRenamePolicy());
fileNamePath = StringUtils.defaultString(up.getParameter("file1")).toString();
//file객체에 업로드된 파일을 저장
f1 = up.getFile("file1");
fileName = f1.getName();
fileSystem = up.getFilesystemName("file1");
fileImgTag = "<img src=/>";
} catch(Exception ex) {
out.println("<script>");
out.println("alert('예외메시지 = "+ex.getMessage()+"');");
out.println("</script>");
}
finally{
System.gc();
}
//아래 { }에 있는 부분들이 json 파싱에 이용될 문자열입니다.
%>
{
"fileName" : "<%= fileName %>"
"fileImgTag" : "<%= fileImgTag %>"
"fileSystem" : "<%= fileSystem %>"
"fileNamePath" : "<%= fileNamePath %>"
}
language/jquery 2013. 12. 13. 10:53
원본 :: http://jungmina.com/410 참조 :: http://blog.naver.com/kissmenot?Redirect=Log&logNo=140201550450 - jQuery Form Plugin을 이용하면 page reload 없이 file을 upload 할 수 있다.
* 소스 파일
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=euc-kr"> <title>jQuery File Upload</title> <link href="/css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src=" /jquery.js"></script> <script type="text/javascript" src=" /jquery.form.js"></script> <script type="text/javascript"> //ajax error check $(document).ajaxError(function(event, request){ if(request.status==500) alert("데이터 저장시 오류 발생!!"); } ); //파일전송 후 콜백 함수 function FileuploadCallback(data, state){ if (data=="error"){ alert("파일전송중 에러 발생!!"); return false; } alert(data + " 파일전송 완료!!"); } $(function(){ //비동기 파일 전송 var frm=$('#frmFile'); frm.ajaxForm(FileuploadCallback); frm.submit(function(){return false;}); }); // 파일업로드 이벤트 function FileUpload(){ if(!$("#Filename").val()){ alert("파일을 선택하세요."); $("#Filename").focus(); return; } //파일전송 var frm; frm = $('#frmFile'); frm.attr("action","./file_upload.jsp"); frm.submit(); } </script> </head> <body> <div style="width:350px"> <form id="frmFile" name="frmFile" method="post" enctype="multipart/form-data"> <div>파일을 선택하세요.</div> <div><input type="file" size="30" name="Filename" id="Filename" /></div> <div><input type="button" class="btn menu" value="확인" onclick="FileUpload();" /></div> </form> </div> </body> </html>
* 파일 업로드 파일
<%@ page contentType="text/html;charset=euc-kr" %>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
String savePath="/usr/local/apache/htdocs/vobos/tv/badboy"; // 저장할 디렉토리 (절대경로)
int sizeLimit = 10 * 1024 * 1024 ; // 파일업로드 용량 제한.. 10Mb
try{
MultipartRequest multi = new MultipartRequest(request, savePath, sizeLimit,"euc-kr", new DefaultFileRenamePolicy());
String fileName= multi.getFilesystemName("Filename");
String originFileName = multi.getOriginalFileName("Filename");
if(fileName == null){
out.print("파일이 업로드 되지 않았습니다!!");
}else{
fileName=new String(fileName.getBytes("ISO-8859-1"),"euc-kr");
out.print(originFileName);
}
}catch(Exception e){
out.print(e.getMessage());
}
%>
language/jquery 2013. 10. 29. 12:23
language/jquery 2013. 9. 26. 17:27
language/jquery 2013. 9. 23. 10:42
language/jquery 2013. 9. 11. 17:34
원본 링크 http://nampoong.tistory.com/75
날짜 입력폼과 관계된 데이터 컨트롤시 jquery-ui 에서 제공하는 datepicker를 많이 이용하는데요. 오늘은 시작일과 종료일의 범위를 두고 그사이의 특정날짜들을 일부 제거해야하는 형태의 프로그램작업이 있어 작업한걸 공개해봅니다.
일단 먼저 아래와 같이 기본적으로 필요한 jquery와 jquery-ui를 불러옵니다. jquery.com CDN 을 이용했습니다.
날짜컨트롤들을 지역화하여 한글형태로 다루기 위해 먼저 datepicker 의 기본옵션값을 세팅해둔후 주말(토,일요일), 일요일, 이전날짜, 특정날짜들을 return 하는 함수들도 선언해 둡니다. disabledDays 라는 배열변수에는 임의로 "2013-7-9", "2013-7-24", "2013-7-26" 와 같이 3개의 날짜를 듬성듬성 심어놓았습니다. 각 입력폼에 datepicker 를 호출하면서 beforeShowDay 라는 옵션값에 가져오는 값에 따라 특정날짜들이 disable 됩니다.
02 | $.datepicker.regional['ko'] = {closeText: '닫기',prevText: '이전달',nextText: '다음달',currentText: '오늘',monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],dayNames: ['일','월','화','수','목','금','토'],dayNamesShort: ['일','월','화','수','목','금','토'],dayNamesMin: ['일','월','화','수','목','금','토'],weekHeader: 'Wk',dateFormat: 'yy-mm-dd',firstDay: 0,isRTL: false,showMonthAfterYear: true,yearSuffix: ''}; |
03 | $.datepicker.setDefaults($.datepicker.regional['ko']); |
04 | $('#date1').datepicker({showOn: 'both',buttonText: "달력",changeMonth:true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput:true,maxDate: '+1y',beforeShowDay: disableAllTheseDays }); |
05 | $('#date2').datepicker({showOn: 'both',buttonText: "달력",changeMonth:true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput:true,maxDate: '+1y',beforeShowDay: noBefore }); |
06 | $('#date3').datepicker({showOn: 'both',buttonText: "달력",changeMonth:true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput:true,maxDate: '+1y',beforeShowDay: noWeekendsOrHolidays }); |
07 | $('#date4').datepicker({showOn: 'both',buttonText: "달력",changeMonth:true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput:true,maxDate: '+1y',beforeShowDay: noSundays }); |
11 | var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"]; |
14 | function noWeekendsOrHolidays(date) { |
15 | var noWeekend = jQuery.datepicker.noWeekends(date); |
16 | return noWeekend[0] ? [true] : noWeekend; |
20 | function noSundays(date) { |
21 | return [date.getDay() != 0, '']; |
25 | function noBefore(date){ |
26 | if (date < new Date()) |
32 | function disableAllTheseDays(date) { |
33 | var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); |
34 | for (i = 0; i < disabledDays.length; i++) { |
35 | if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) { |
위 소스상의 내용은 아래 입력폼에서 테스트 해볼수 있습니다.
특정일 비활성화 :
이전날짜 비활성화 :
주말(토,일) 비활성화 :
일요일만 비활성화 :
특정날짜와 주말을 비활성화한다던지 토요일만 비활성화 한다던지.. 국경일,명절 날짜데이터를 수집해서 비활성화 한다던지 여러가지로 응용해서 만들어 볼수도 있겠습니다~~~ ^^
참고 url :
http://api.jqueryui.com/datepicker/
http://davidwalsh.name/jquery-datepicker-disable-days   
|
cos.jar