[AJAX] 다중 fileupload / formData 이용하여 JSON 파라미터 넘기기 & 파일업로드 구현

[jQuery] 파일 업로드 input type = 'file' 다중으로 생성하기

 html  

  js  

file은 JSON에 포함될 수 없다. 그래서 FormData 안에 file과 JSON (= data)를 append 시킨다.

//FormData 새로운 객체 생성 
var formData = new FormData();
// 넘길 데이터를 담아준다. 
var data = {   
    "userId"    : $("#userId").val(),
    "title"     : $("#title").val(),
    "contents"  :  $("#contents").val()
}

// input class 값 
var fileInput = $('.files');
// fileInput 개수를 구한다.
for (var i = 0; i < fileInput.length; i++) {
	if (fileInput[i].files.length > 0) {
		for (var j = 0; j < fileInput[i].files.length; j++) {
			console.log(" fileInput[i].files[j] :::"+ fileInput[i].files[j]);
			
			// formData에 'file'이라는 키값으로 fileInput 값을 append 시킨다.  
			formData.append('file', $('.files')[i].files[j]);
		}
	}
}

// 'key'라는 이름으로 위에서 담은 data를 formData에 append한다. type은 json  
formData.append('key', new Blob([ JSON.stringify(data) ], {type : "application/json"}));

// ajax 처리 부분 * 
$.ajax({
      url: 'url',
      data: formData,
      contentType: false,               // * 중요 *
      processData: false,               // * 중요 *
      enctype : 'multipart/form-data',  // * 중요 *
      success: function(data) {
        if (result.SUCCESS == true) {
         alert("성공");
        } else {
         alert("실패");
         }
      }
});

- contentType : false 로 선언 시 content-type 헤더가 multipart/form-data로 전송되게 함

- processData : false로 선언 시 formData를 string으로 변환하지 않음

 

  service  

public void insertMypageQna(Map<String, Object> param,  List<MultipartFile> fileList) throws Exception {
    boardMapper.insertMypageQna(param);
    List<Map<String,Object>> list = fileutils.fileUpload(param, fileList);
    
    if(list!=null){
      for(int i = 0; i < list.size(); i++){
     	 boardMapper.insertFile(list.get(i));
      }
    }
}

  xml  

<insert id="insertFile" parameterType="map">
    INSERT INTO COMMONFILES(
        file_no,
        board_no,
        original_file_name,
        stored_file_name,
        file_size,
        create_date,
        create_user,
        del_y_n
        )
    VALUES(
        NEXTVAL('file_no'),
        #{boardNo},
        #{originalFileName},
        #{storedFileName},
        #{fileSize},
        current_timestamp,
        #{createUser},
        'N'
        )   
</insert>

  controller  

@RequestMapping(value="/insertMypageQna.do", method=RequestMethod.POST)
@ResponseBody
  public Map<String, Object> insertMypageQna(
  @RequestPart(value = "key") Map<String, Object> param,
  @RequestPart(value = "file",required = false) List<MultipartFile> fileList) throws Exception {
  
  Map<String, Object> result = new HashMap<String, Object>();
  
   bservice.insertBoard(param,fileList);
   result.put("SUCCESS", true);
   
  // result를 return 하면 ajax success에서 result.SUCCESS == true로 if문 사용가능
  return result;
}

  globals. properties  

 

# 파일 업로드 경로(경로 설정은 반드시 절대경로를 사용해야함, 경로 뒤에 /를 붙여 주어야함.)
Globals.filePath =  C:/file/upload/

  FileUtils.java  

//파일 업로드 
public static List<Map<String,Object>> fileUpload(Map<String,Object> map, List<MultipartFile> fileList) throws Exception{ 
  String user = (String) map.get("memWriter");
  int board_no = (int)map.get("board_no");

  List<Map<String,Object>> list = new ArrayList<Map<String,Object>>(); 
  Map<String, Object> listMap = null; 
  for(MultipartFile mf : fileList){

  listMap = new HashMap<String,Object>(); 
  listMap.put("boardNo", board_no); 
  listMap.put("createUser", user); 
  listMap.put("originalFileName", mf.getOriginalFilename()); 
  
  // 저장이름
  listMap.put("storedFileName", CommonUtils.getRandomString() + mf.getOriginalFilename()); 
  listMap.put("fileSize", mf.getSize()); 

  list.add(listMap); 

  // globals.properties
  File dest = new File(EgovProperties.getProperty("Globals.filePath") + listMap.get("storedFileName"));
    if(!dest.exists()){
     dest.mkdirs(); //디렉토리가 존재하지 않는다면 생성
    }
  listMap.put("file_path",mf.getOriginalFilename());
  listMap.put("real_file_path",dest);

  mf.transferTo(dest);
  }
  return list; 
}

DB 확인

 

 

~ 파일 다운로드 아래 참고 ~

파일 다운로드 구현

 

 

 

[ajax]fileupload 시 formData 이용하여 파라미터 넘기기

simpleBlog 개발 일지 (4)