Input type 파일 업로드

 <form method="POST" onsubmit="return false;" enctype="multipart/form-data">
        <input type="file" onchange="addFile(this);" multiple />
        <div class="file-list"></div>
    </form>

input의 파일을 업로드 하는 경우 input tag의 files에 file들이 채워지게 되는데, 이때 files는 배열이 아니므로 map이나 filter등의 array 관련 메소드들이 없다.

따라서 제거된 파일의 목록을 별도로 만들고 그 목록을 FileList 형태로 만들어서 재할당 해주는 방식이 필요하다.

const input = document.getElementById('file');

var newFile = blobToFile(blob, fileName);
//1. blob 파일을 File로 생성

const newFileList = new DataTransfer();
// 2. DataTransfer 인스턴스 생성

newFileList.items.add(newFile));
// 3. 인스턴스에 수정된 파일 목록을 할당

document.getElementById('assignment-file').files = newFileList.files;
// 4. 설정한 인스턴스의 files를 input files에 재할당

//blob to File로 변경하는 함수
function blobToFile(blob, fileName){
  return new File([blob], fileName, { lastModified: new Date().getTime(), type: blob.type })'
}
 
참고 사이트
https://velog.io/@yuije/HTML-Input-File-Value-%EB%B3%80%EA%B2%BD

HTML Input File Value 변경

 

화면에서 여러가지 정보와 함께 파일 첨부도 여러개 보내야 할때

JSP에서 multipart/form-data 형식으로 전송된 데이터를 처리할 때, Spring MVC에서는 ModelAttribute를 사용하여 데이터를 바인딩하는 것이 일반적입니다. 그러나 multipart/form-data 형식으로 전송된 데이터는 HttpServletRequest 객체를 통해 직접 접근해야 합니다. 이를 위해 Spring MVC에서는 MultipartFile을 사용하여 파일 업로드를 처리하고, HttpServletRequest를 사용하여 다른 데이터를 처리할 수 있습니다.

https://brilliantdevelop.tistory.com/111

Spring Multipart 및 파일업로드