정미나닷컴

[jQuery] jQuery Form Plugin을 이용한 File Upload 본문

IT

[jQuery] jQuery Form Plugin을 이용한 File Upload

정미나 2010. 7. 14. 10:45
- 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());
     }
%>
저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

[jQuery] jQuery와 XPath를 연동한 xml 파싱  (0) 2010.08.30
[XPath] XPath를 이용한 xml 파싱  (1) 2010.08.19
[jQuery] jQuery를 이용한 xml 파싱  (0) 2010.07.02
[JavaScript] 자바스크립트 iframe 자동 Resizing 함수  (0) 2010.05.13
[JSP] JSP D-day 계산  (0) 2010.04.27
'IT' Related Articles more