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

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


: