[펌]파일업로드 - 비동기식전송

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 %>"
	
}


: