본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[중요] Javascript

Formdata를 활용하여 ajax로 파일전송 하기

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 26.

 

jquery.를 활용하다 보면 다량의 파일을 비동기 방식으로 전송해야 되는 요구사항을 많이 만난다. 사용자 입장에서는 화면이 바뀌지 않고 파일만 보내기 때문에 해당 페이지에서의 정보가 바뀌거나 새로고침이 되지 않아서 매우 편리하다.
이를 위해서는 Javascript에서 지원하는 formdata라는 객체를 활용하면 쉽다.

//아래 내용이 일반 key, value로 전송되는 값이다.
const sendingData = new FormData();
sendingData.append('id',1234);  
sendingData.append('text','텍스트');


//아래 부분은 input type file에서 파일 데이터를 가져와서 key, value로 전송하는 부분이다.
//file1과 file2는 보내는 이름이다.
sendingData.append('file1',$('#파일테그1')[0].files[0]);
sendingData.append('file2',$('#파일테그2')[0].files[0]);

//만약 file1에 다른값을 넣으면, 당연하게도 file1로 덮어씌워져 버린다.

$.ajax({
    url: '받는주소',
    processData: false,  // 데이터 객체를 문자열로 바꿀지에 대한 값이다. true면 일반문자...
    contentType: false,  // 해당 타입을 true로 하면 일반 text로 구분되어 진다.
    data: sendingData,  //위에서 선언한 fromdata
    type: 'POST',
    success: function(result){
        console.log(result);
    },
    error : function(e){
    console.log(e);
    }
});

 

받는 서버에서는 간단하게 key, value형식으로 받을 수 있다.

spring 기준으로 본다면 아래코드처럼 받으면 된다. 물론 받는 방식은 정말 여러가지이다.

@RequestMapping(value = "/publicModelCreate.do")
@ResponseBody
public String publicModelCreate(@RequestParam HashMap<Object, Object> param,  MultipartHttpServletRequest filelist) {
    //param  --> 넘어온 파라미터
    //filelist --> 넘어온 파일 리스트
    //MultipartFile로 이름을 주어서 따로 받을 수 있다. ajax로 file1로 보냈으니 받을 때 MultipartFile file1 이런식으로도 가능하다.
    //MultipartHttpServletRequest로 받으면 한번에 객체를 통째로 받아서 나름 편하다.
    Iterator<String> iter = filelist.getFileNames(); 
    MultipartFile mfile = null; 
    String fieldName = "";
    while (iter.hasNext()) { 
        fieldName = (String) iter.next(); //파일이름, 위에서 file1과 file2로 보냈으니 file1, file2로 나온다.
        mfile = filelist.getFile(fieldName);  //저장된 파일 객체
    }
    return "SUCC";
}

 

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글