javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data MultipartHttpServletRequest

 

javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data  MultipartHttpServletRequest

 

이번 포스팅은 웹에서 멀티로 파일을 선택해 저장하는 방법을 알아보도록 하겠습니다.

 

멀티업로드를 위해서는

1. html file 태그에 multiple옵션 추가 및 name을 배열 형태로 설정

2. ajaxForm 으로 form 을 servlet으로 전달, form에는 enctype="multipart/form-data" method="post" 옵션 추가

3. Spring multipartResolver 설정

4. maven 사용 시 commons-fileupload, commons-io 의존성 추가

가 필요합니다.

 

우선 HTML 에서 멀티로 파일을 선택하기 위해서는

file태그에 multiple 옵션을 추가하고, name을 배열형식으로 설정해야 합니다.

 

<input multiple="multiple" name="files[]" id="files" type="file" style="width:500px"/>

 

multiple="multiple"

name = "file[]"

 

이제 파일을 선택하면 아래와 같이 멀티로 선택이 가능합니다.

 

 

 

form 태그 내에 file 태그를 위치합니다.

 

<form id="frm" name="frm" action="$/content/uploadContent.do" enctype="multipart/form-data" method="post">
    <label for="file">파일 </label><input multiple="multiple" name="files[]" id="files" type="file" style="width:500px"/>
</form>

 

ajax를 사용해서 위의 form을 비동기방식으로 서버로 전달하기 위한 설정을 하겠습니다.

이를 위해서는 jquery.form.js 파일이 필요한데, 구글링을 통해 쉽게 구하실 수 있습니다.

ajaxForm : function (id, func){
    $('#'+id).ajaxForm({
        contentType : false,
        processData: false,
        enctype: "multipart/form-data",
       type : "POST",
        dataType : 'json',
        beforeSubmit: function(data, form, option) {
            console.log('beforeSubmit');
            console.log(data);
            console.log(form);
            console.log(option);
        },
        success: function(returnData) {
            func(returnData);
        },
        error: function(x,e){
            console.log("[aljjabaegi]ajax status : "+x.status);
            console.log(e);
        },
    });
},

 

위의 함수를 통해 form의 id와 callback Function을 매개변수로 받아 전달하도록 하겠습니다.

frm을 submit 하면 전송이 됩니다. $('#frm').submit();

beforeSubmit을 통해 전달할 데이터와 옵션 등을 확인 하실 수 있습니다.

 

이제 서버에서 file 데이터를 받기위한 설정을 하겠습니다.

spring 설정파일인 context-common.xml 에 multipartresolver bean을 추가합니다.

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="100000000" />
    <property name="maxInMemorySize" value="100000000" />
</bean>

 

그리고 멀티파일을 받기위한 jar파일을 의존성 주입합니다.

pom.xml 의 dependencies 태그 내에 아래 코드 추가

 

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.1</version>
        </dependency>  
        
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>1.4</version>
        </dependency>

 

 이제 컨트롤러에서는 MultipartHttpServletRequest 를 통해 멀티 파일을 받을 준비가 되었습니다.

웹에서 파일을 선택한 후 서블릿에 전달을 하면 아래와 같은 방식으로 받을 수 있습니다.

 

    @RequestMapping(value="/uploadContent.do", method = RequestMethod.POST, produces="text/plain;Charset=UTF-8")
    @ResponseBody
    public String uploadContent(MultipartHttpServletRequest req) throws Exception{
        Gson gson = new Gson();
        FolderSet set = new FolderSet();
        List<MultipartFile> mf = req.getFiles("files[]");
        // 중략

 

받은 파일을 Oracle BLOB 형태로 저장하는 방법은 아래의 Link를 참고하세요.

 

Link : Oracle 오라클 myBatis BLOB 파일 저장, 불러오는 방법 이미지 미리보기