[java] ajax이용해서 파일 업로드/다운로드, file upload

파일업로드/다운로드를 구현하는 다양한 방법이 있습니다. 그중에 ajax를 이용한 방법을 소개하도록 하겠습니다. 

1. jsp에서 <input> 태그의 type="file", name="file_test" 로 지정한다.

<label for="file_test">파일 업로드:</label>
<input type="file"  id="file_test" name="file_test" >

enctype: 'multipart/form-data'로 지정

var formData = new FormData(document.getElementById('myForm'));	
 $.ajax({
   type:"POST",
   enctype: 'multipart/form-data',
   processData:false,
   contentType:false,
   url:"/test",
   data:formData,
   success:function(data){
   console.log("success") 
   }
   });  	

 

2. 여기서 설정한 name의 값을 VO(java 파일)에 동일하게 설정해준다. (lombok사용가정으로 getter,setter 생략)

@JsonIgnore
private  List<MultipartFile> file_test;

	

vo에서 @jsonIgnore를 설정해준이유는 여기서 우리는 ajax를 이용해서 파일 등록을 할건데 multipart를 json으로 
serialize()할 수 없어서 json 으로 변경되는것을 무시하기위해 @jsonIgnore를 사용해준다.  나는 mytest.txt파일을 업로드 해보았다. 여기까지 지정하고  controller에서 확인해보면 값이 넘어온것을 확인할 수 있다.

 

debug

그리고나서 항간에 많이 돌아다니는 파일업로드 로직을 사용해서 처리해준다. 

public List<Map<String,Object>> Upload(List<MultipartFile> files, String folder_name, int parent_key, ) throws IllegalStateException, IOException {
		
  List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>();

  for(int i=0;i<files.size();i++) {
  if( files.get(i).getOriginalFilename().length() != 0) {

  String originName = files.get(i).getOriginalFilename();//파일이름
  String exten = originName.substring(originName.lastIndexOf("."),originName.length());//확장자
  String random = "";//랜덤값
  SimpleDateFormat sdf = new SimpleDateFormat("yyyy_MM_dd_HHmmssSSS");
  int rndNum = (int)(Math.random()*100000);
  random = sdf.format(new Date(System.currentTimeMillis()))+"_"+rndNum+exten;
  File f = new File(path+folder_name+random);//저장위치

  //사용자 컴퓨터에 해당하는 파일 경로 없을때 폴더 생성
  f.getParentFile().mkdirs();

  //파일 업로드
  files.get(i).transferTo(f);

  Map<String,Object> dataMap = new HashMap<String,Object>();
  dataMap.put("file_seq", 0);
  dataMap.put("parent_key", parent_key);
  dataMap.put("file_name", originName);
  dataMap.put("save_file_name", random);
  dataMap.put("file_path", path+folder_name);

  dataList.add(dataMap);
  }

  }	
return dataList;
}

그다음 dataList에 들어있는 파일 위치와 저장될 파일이름, 원래 파일이름을 db에 저장해준다. 그럼 끝!