jQuery/AJAX Fileupload

jQuery AJAX File Upload

Soul-Learner 2014. 8. 8. 12:44

jQuery 이 AJAX 기능을 이용하여 파일을 전송하는 예 ( jQuery AJAX File Upload example )



다른 플러그인을 사용하지 않고 jQuery의 ajax 기능만을 이용하여 파일을 업로드하는 예

HTML5에서 지원하는 FormData 객체를 이용한다

uploadForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX 파일 업로드 예</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
function ajaxUpload(){
	var formData = new FormData(); 
	formData.append("name", $("input[name=name]").val()); 
	formData.append("desc", $("textarea[name=desc]").text()); 
	formData.append("pic", $("input[name=pic]")[0].files[0]); 
	$.ajax({ 
		url: 'apacheUpload.jsp', 
		data: formData, 
		processData: false, 
		contentType: false, 
		method: 'post', 
		success: function(data){ 
			alert("업로드 성공"); 
		},
		error :function(xhr,status,err){
			alert(err);
		}
	}); 
	return false;
};
</script>
</head>
<body>

<form method="post" enctype="multipart/form-data" 
		onsubmit="return ajaxUpload();"> 
<input type="text" name="name" value="ajax업로드 테스트"/><br/> 
<textarea rows="10" cols="10" name="desc">잘 돼야 할텐데...</textarea><br/> 
<input type="file" name="pic" /> <br>
<button type="submit"> 업로드 </button>
</form>

</body>
</html>



서버측에서 아파치 업로드 라이브러리를 이용하여 멀티파트 업로드를 처리하는 예

apacheUpload.jsp

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.io.File" %>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.*"%>
<%@ page import="org.apache.commons.io.FilenameUtils"%>

<%
 boolean uploaded = true;
 request.setCharacterEncoding("utf-8");
 
 boolean isMultipart = ServletFileUpload.isMultipartContent(request);
 if (!isMultipart) {
 }else {
    FileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);
    List items = null;
    try {
       items = upload.parseRequest(request);
    } catch (FileUploadException e) {
     out.println("에러 1: "+e);
    }
    //Iterator itr = items.iterator(); // items 는 List 이므로 리스트 다루는 방법으로 해도 된다
    for(int i=0;i<items.size();i++) {
        FileItem item = (FileItem) items.get(i);
        if (item.isFormField()) { // 파일이 아닌 폼필드에 입력한 내용을 가져옴.
          if(item!=null && item.getFieldName().equals("name")) {
            String name = item.getString("utf-8");//form field 안에 입력한 데이터를 가져옴
            System.out.println("전송자:"+name+"<br>"); 
          }else if(item!=null && item.getFieldName().equals("desc")) {
            String desc = item.getString("utf-8");
            System.out.println("파일에 대한 설명:"+desc+"<br>");
          }
       } else { // 폼 필드가 아니고 파일인 경우
          try {
            String itemName = item.getName();//로컬 시스템 상의 파일경로 및 파일 이름 포함
            if(itemName==null || itemName.equals("")) continue;
            String fileName = FilenameUtils.getName(itemName);// 경로없이 파일이름만 추출함
            // 전송된 파일을 서버에 저장하기 위한 절차
            //String rootPath = getServletContext().getRealPath("/");
            File savedFile = new File("D:/upload/"+fileName); 
            item.write(savedFile);// 지정 경로에 파일을 저장함
         } catch (Exception e) {
            System.out.println("서버에 파일 저장중 에러: "+e);
            uploaded = false;
         }
      }    //end of else
    }     // end of for
 } 
%>
{"uploaded":<%=uploaded%>}


저작자표시