ajaxForm 플러그인 사용하여 ajax로 파일 업로드하기

ajax로 파일 전송하기 (ajaxForm)

준비물 : jQuery 1.10.0 (↑)

jquery.form.js (http://malsup.com/jquery/form/#download)

먼저 jQuery 버전을 1.10.0 버전 이상을 받을 것을 권장

 

 

여기서 유의점은 보통 ajax와 쓰는 방법은 같지만 ajaxForm은 별도로 submit을 해주어야한다.

/* javascript */

function fileUpload() {

$('#fileForm').ajaxForm({

url: "/testFile.do",

enctype: "multipart/form-data", // 여기에 url과 enctype은 꼭 지정해주어야 하는 부분이며 multipart로 지정해주지 않으면 controller로 파일을 보낼 수 없음

success: function(result){

alert(result);

}

});

// 여기까지는 ajax와 같다. 하지만 아래의 submit명령을 추가하지 않으면 백날 실행해봤자 액션이 실행되지 않는다.

$("#fileForm").submit();

}

 

/* html */

<form id="fileForm" action="/testFile.do" enctype="multipart/form-data">

<!-- form에 두껍게 처리 된 부분은 ajaxForm에서 설정해주어도 괜찮지만 여기에 이렇게 명시해주어도 괜찮다 -->

<input type="file" name="testFile" id="testFile"  />

</form>

 

 

 

/* controller */

@RequestMapping("/bi/testFile.ajax")

public String testFile(MultipartHttpServletRequest req,HttpSession session, HttpServletRequest request) throws Exception {

//Iterator<String> itr =  req.getFileNames();

//MultipartFile files = req.getFile(itr.next());

// 파일이 여러개일경우 위와같이 사용 할 수 있다

MultipartFile file = req.getFile("testFile");

// 단일 파일일 경우 html의 name에 설정된 이름으로 파일을 가져올 수 있다.

System.out.println(file.getOriginalFilename());

// 이건 그냥 파일 잘 받았나 확인 해본거

return "1";

}

 

출처 http://ppqqpqpq.tistory.com/47