spring framework ajax 파일 업로드, 다중업로드

ajax로 파일 업로드, 다중 업로드시 FormData 객체가 필요하다.

단, 구버전 IE 에서는 jquery.form.js 을 사용해야 한다.



ajaxUpload.jsp


전송하기 버튼을 눌렀을 때 fileSubmit() 에서 ajax로 전송하게 된다.

이 때 핵심은 var formData = new FormData($("#fileForm")[0]);




FileUploadController.java

하나의 파일에서 모두 보여주기 위해 Controller에 업로드 관련코드를 모두 넣음


ajaxUpload.jsp 에 맞게 매핑해주고, 업로드 된 파일과 

MultipartHttpServletRequest, MultipartFile 로 다중 업로드된 파일을 처리한다.




파일 2개와 id, pw를 입력한 후 전송하기 버튼을 누르면

파일 업로드하였다는 메시지가 뜸




이클립스 콘솔창에도 실제 파일 이름과, 입력한 id, pw 값을 확인할 수 있다.



또한 Controller 에서 설정한 경로로 파일이 업로드 된 것도 확인가능하다.


위 코드를 그대로 사용하게 되면 업로드 된 파일은

C:\Users\사용자 이름\워크스페이스 경로\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\프로젝트명\resources\upload

위 경로에서 확인 가능~



댓글(20)

  • 지승제
    2017.05.22 16:09

    좋은 글에 비해 수준 낮은 질문이라 죄송합니다 ㅠ_ㅠ 그 파일이 실제저장되는 이름은 숫자던대 그건 어디서 설정이 되는건가요?

    • 2017.05.22 16:13 신고

      컨트롤러에서 이 부분입니다.

      newFileName = System.currentTimeMillis()+"."
      +fileName.substring(fileName.lastIndexOf(".")+1);

  • 지승제
    2017.05.25 11:14

    네 감사합니다 더 열심히 공부해야...

  • sms
    2017.07.26 10:50

    기존코드가 Map<String, MultipartFile> files = multiRequest.getFileMap();에
    이터레이터에 엔트리까지 넣어서 되는 구조였는데

    이글 보고 이터레이티만 써서도 되게 할 수 있었습니다
    정말 큰 도움이 됬습니다 감사합니다

  • 2017.12.23 12:54 신고

    자바 버전차이인지.. 뭔지.. 아무튼 그대로 복붙하면 에러가 나는 경우가 있습니다.
    dir.mkdir(); 에서 에러가 나는데. filenotfoundException 나는분들은
    dir.mkdirs(); 로 변경하시면 잘될겁니다.

  • shrkda
    2018.10.11 16:15

    왜 저는 전송하기 버튼이 먹통일까요ㅜㅜ

    • 2018.10.11 23:37 신고

      전송 버튼 눌렀을 때 스크립트 에러가 나는지, 서블릿에서 에러가 나는지 확인이 필요해보입니다.

  • 초보자
    2019.03.05 22:59

    안녕하세요. 좋은 글 덕분에 실습하고 있습니다 ~

    그런데 오류가 떠서 잡지를 못하고 있네요 ㅠㅠ
    ajax에서 파일 전송후에 계속 error로 들어가는데

    크롬 콘솔창에 찍힌 내용을 보면
    POST http://localhost:8081/fileUpload 404
    입니다.

    fileUpload를 못찾아서 .. 그런거 같은데...

    이상한 점은 파일업로드 컨트롤러는 요청을 받고 있고
    실제 파일 지정한 경로로 파일 저장까지 이루어 지고 있습니다 ;

    하지만 얼랏창으로는 계속 업로드에 실패했다고 나오는데.. 이게 무슨 상황인지 인지가 잘 안되네요 ㅠㅠ



    ++++

    글 작성하고 살펴보고 있는데
    무엇을 건드렸는지.. 이제 경고창이 잘 나오네요 하하..

    • 2019.03.05 23:18 신고

      안녕하세요.
      fileUp() 에서 디버깅하였을 때 모든 로직을 에러없이 수행한건가요?

      console.log(error); 에서도 어떤 응답을 받았는지 확인 부탁드려요

    • 필명
      2019.07.09 13:09

      저도 똑같은 에러가 나는데ㅠㅠ 혹시 어떻게 하셨는지 알수 있을까요..?ㅠㅠ

  • 초보자
    2019.03.06 08:30

    3개의 파일을 업로드 할 경우
    10번 중 3번 정도 파일명의 중복이 발생 하는데요

    [실제 중복 예 : while 도는 동안 sysout]
    1번 째 생성 된 파일 : 25_gallery_1551828970580.jpg
    2번 째 생성 된 파일 : 25_gallery_1551828970580.jpg
    3번 째 생성 된 파일 : 25_gallery_1551828970582.jpg

    2 5_gallery_ 이 부분은 맨 앞쪽 숫자는 글을 올린 사용자의 번호 뒤에는 구분자로 사용하려 문자열을 넣어주었습니다.. 혹시 이것 때문에 난수에 중복이 발생하는 것 일까요 ?

    newFileName = System.currentTimeMillis()+"."
    +fileName.substring(fileName.lastIndexOf(".")+1);

    이 부분이 파일명에 난수를 붙이는 부분이라면
    해당 코드만 UUID 이용해서 중복 방지를 해도 되는지 궁금합니다 ~ !

    • 2019.03.06 09:06 신고

      System.currentTimeMillis() 이 같은 시간에 호출이 되어 동일한 값이 나온 것 같습니다.
      이 뒤에 랜덤한 숫자를 붙여 파일명이 중복되는 걸 방지하도록 아래 코드를 추가해주세요.
      Random random = null;
      String randomName = "";
      for (int i = 0; i < 6; i++) {
      random = new SecureRandom();
      int temp = random.nextInt(9);
      randomName += Integer.toString(temp);
      }

    • 초보자
      2019.03.06 11:04

      어이쿠 코드까지 .. !

      친절한 답변 감사합니다 ! 덕분에 어려웠던 파일 업로드를 쉽게 이용하고 또 공부하네요 ㅎㅎ

    • 2019.03.06 14:17 신고

      ㅎㅎ 댓글 감사합니다

  • 궁금합니다
    2019.03.07 14:39

    예제처럼 인풋 타입 파일이 2개 있는데
    하나에만 파일을 선택하고 업로드를 눌렀을 때

    파일이 1개가 아니라 2개가 생성되는데 ... 뭘 잘못한걸까요 ㅠㅠ

    1개는 이미지 파일 (실제로 첨부한)
    1개는 확장자명 없는 0 바이트 짜리 공파일

    • 자문자답
      2019.03.07 16:05

      지금은 일단 오류 확인 후 파일 업로드 부분에서 조건문으로 확장자명 없으면 작업 안되게끔 막아둔 상태입니다..

    • 2019.03.08 20:56 신고

      정확한건 디버깅을 해봐야 될 것 같아요.

      String uploadFile = files.next();
      에서 첨부하지 않은 파일이 있었을 때 uploadFile이 null 이거나 "" 으로 나오나요?
      만약 null 또는 "" 일 경우에는 파일 이동 로직을 안타도록 추가 필요해보입니다.

      if(uploadFile != null && uploadFile.length > 0){
      ...}

  • 초보
    2019.06.10 17:16

    안녕하세요.. 초보적인질문에 죄송스러운데..
    제가 사진 등록만하면
    Failed to load resource: the server responded with a status of 404 (Not Found) 가 뜨거나
    localhost: .... / filefileUpload 404 가 뜹니다..
    로그를 봐도 그냥 컨트롤러에 있는 url 자체를 못타는거같습니다..
    path는 / 로 되어있고
    .do / .ajax 두개를 사용하고있습니다
    그래서 컨트롤러나 ajax url 을 do 나 ajax 등등으로 수정을 해봐도 똑같은에러가뜹니다..
    아무리해봐도 안됩니다.. 죄송합니다ㅜㅜ..

    에러로그
    Object
    abort: ƒ (a)
    always: ƒ ()
    complete: ƒ ()
    done: ƒ ()
    error: ƒ ()
    fail: ƒ ()
    getAllResponseHeaders: ƒ ()
    getResponseHeader: ƒ (a)
    overrideMimeType: ƒ (a)
    pipe: ƒ ()
    progress: ƒ ()
    promise: ƒ (a)
    readyState: 4
    responseText: ↵

    ↵<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
    setRequestHeader: ƒ (a,b)
    state: ƒ ()
    status: 404
    statusCode: ƒ (a)
    statusText: "Not Found"
    success: ƒ ()
    then: ƒ ()
    __proto__: Object

    • 2019.06.11 20:49 신고

      매핑이 맞게 되었는지, 다른 정상적으로 호출하는 URL이 있다면 안되는 경우와 다른점이 무엇인지 확인해보셔야 할 것 같아요.

Designed by JB FACTORY