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

Carpe Programming/javascript

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

nolite 2011. 7. 15. 15:57

- 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());
     }
%>

728x90

저작자표시

'Carpe Programming > javascript' 카테고리의 다른 글

input type file 이미지 버튼으로 (0)	2011.08.09
jquery plugin site (0)	2011.07.18
[jQuery] jQuery를 이용한 검색 자동완성 기능 (0)	2011.07.15
[JavaScript] iframe에 onclick 적용 (0)	2011.07.15
팝업창 띄울때 띄워져 있으면 안띄우기 (0)	2011.07.15

현재글[jQuery] jQuery Form Plugin을 이용한 File Upload