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