버튼 클릭시 파일 업로드 하는 방법에 대해서 알아보자

1. HTML

---

<button type="button" class="btn btn-secondary" onclick="excelUpload(); return false;">엑셀업로드</button>

2. JS

---

function afterFileChange(){ var formData = new FormData(); formData.append("excelFile", $("#file")[0].files[0]);

$(".preloader").fadeIn();

debugger;

$.ajax({
    url : "/rest/home/uploadExcel",
    data : formData,
    dataType : 'json',
    processData : false,
    contentType : false,
    type : 'POST',
    success : function(data) {
        if( data.result == 'SUCCESS'){
            searchList();
        }else{
             var Ca = /\+/g;
            alert(decodeURIComponent( data.MSG.replace(Ca, " ") ));
            $("#file").val('');
            $(".preloader").fadeOut();
        }
    },
    error : function (xhr, ajaxOptions, thrownError) {
        alert("서버에러가 발생했습니다. 관리자에게 문의 바랍니다.")
    }

});
}

function excelUpload() {
     $("#file").click();
}

3. JAVA

---

@RequestMapping(value = "/uploadExcel")
public String uploadExcel(  HttpServletRequest req 
                          ,HttpServletResponse res
                          ,@RequestParam("excelFile") MultipartFile file
) throws Exception {
    // 내용
}

4. context-servlet.xml

---

<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

5. pom.xml

---

<dependency>
   <groupId>commons-fileupload</groupId>
   <artifactId>commons-fileupload</artifactId>
   <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>