Excel upload 화면에 보여준 후 DB 저장

*기존 엑셀업로드 후 DB 저장하는 게시글과는 다른 방식

- 엑셀업로드 파일에 하나의 값을 가지고 테이블 조회 후 조회해 온 데이터들을 화면에 보여준 후 DB저장

 

 

 

 

1.  jsp파일 : 버튼 만들기

<button type="button" class="btn_list" id="excelUpload" onclick="fileExlBtn(this);">엑셀 업로드</button> <input type="file" class="fileTag" id="exlFile" onchange="fun_excelUpload();" />

<script> : 페이지 로드 시 input type의 file버튼 숨기기

function pageLoad(){     $("#exlFile").hide(); }

<script> : 본인이 만든 엑셀 버튼 누르면 input type의 file 버튼 클릭

//엑셀 업로드 버튼 function fileExlBtn(_this){     $(_this).next().click();     }

• 엑셀업로드 버튼을 만들어 주는데 input type의 file버튼을 이용하면 예쁘지 않기 때문에 따로 엑셀 업로드 버튼을 만들어 주고 onclick으로 다음 버튼을 클릭하게 만들어 준다. (input type의 file버튼은 페이지 로드 시 숨겨준다.)

 

<script> : 엑셀 파일을 업로드 하면 fun_excelUpload() 함수를 타서 ajax로 엑셀에 있는 데이터로 테이블을 조회 후 조회한 데이터들을 가지고 온다. 데이터들을 가져오는데 성공했다면 success부분에서 테이블을 그려준다.

// 엑셀 업로드 처리 function fun_excelUpload() {          var formData     = new FormData();     formData.append("file", $("#exlFile")[0].files[0]);          $.ajax({           type        : "post",           async        : true,               url            : '/test/uploadExcel.do',           data        : formData,           datatype    : "text",           contentType    : false,           processData    : false,         beforeSend     : function() {         },         success : function(data){                          var userListHtml        = '';                          var userList = data.root.userList.userList;             var userListLen = data.root.userList.userList.length;                          if(userListLen > 0){                 for(var idx=0; idx < userListLen; idx++){                     userListHtml += '<tr class="bd_bt" id="'+idx+'Tr">';                     userListHtml += '<td class="pd10" align="center"><input type="text" style="background:none;text-align:center; border:none;border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px;" value="'+userList[idx].rowNum+'" readonly /></td>';                     userListHtml += '<td class="pd10" align="center"><input type="text" id="userNoArray" name="userNoArray" style="background:none;text-align:center; border:none;border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px;" value="'+userList[idx].userNo+'" readonly></td>';                     userListHtml += '<td class="pd10" align="center"><input type="text" id="userIdArray" name="userIdArray" style="background:none;text-align:center; border:none;border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px;" value="'+userList[idx].userId+'" readonly></td>';                     userListHtml += '<td class="pd10" align="center"><input type="text" id="userNmArray" name="userNmArray" style="background:none;text-align:center; border:none;border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px;" value="'+userList[idx].userNm+'" readonly></td>';                     userListHtml += '<td class="pd10" align="center"><input type="text" id="phnNoArray" name="phnNoArray" style="background:none;text-align:center; border:none;border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px;" value="'+userList[idx].phnNo+'" readonly></td>';                     userListHtml += '</tr>';                 }             }             $("#sendUsrListArea").html(userListHtml);         }     }); }

 

 

---

 

 

2. controller

/**      * @ 내용     : 엑셀 업로드      * @ 작성자     :       * @ Method : uploadExcel      */     @RequestMapping(value="/test/uploadExcel.do")     @ResponseBody     public ModelAndView uploadExcel(@RequestParam(value="file", required=false) MultipartFile file                                     , @ModelAttribute PushVO pushVO                                     , HttpServletRequest request                                     , HttpServletResponse response) throws Exception {                  Map<String,Object> data = new HashMap<String,Object>();                  Workbook workbook = null;           if(!file.isEmpty()) {             //------------------------------------------------------------------------------             // Excel파일을 업로드 하지 않고 그대로 읽어서 처리             //------------------------------------------------------------------------------             InputStream inputStream = new ByteArrayInputStream(file.getBytes());                         //------------------------------------------------------------------------------                          workbook = WorkbookFactory.create(inputStream);               Sheet datatypeSheet         = workbook.getSheetAt(0);             Iterator<Row> iterator         = datatypeSheet.iterator();               PushVO param             = null;             List<PushVO> listVO     = new ArrayList<PushVO>();               int idx = 0;                      while(iterator.hasNext()) {                                  Row currentRow                 = iterator.next();                 Iterator<Cell> cellIterator = currentRow.iterator();                 param                         = new PushVO();                 idx                         = 0;                 while (cellIterator.hasNext()) {                                          Cell currentCell = cellIterator.next();                                          switch(idx) {                         case 0:                             String value = getStringValue(currentCell);                                 param.setUserId(value);                //사용자 ID                             break;                         case 1:                             break;                                             }                     idx++;                 }                 listVO.add(param);             }             Map<String, Object> userList = pushService.uploadExcel(listVO);             data.put("userList",userList);         }             return SendMiPlatform.SendString(response, data);     }

// cell의 데이터를 string으로 변경 public static String getStringValue(Cell cell) {     String rtnValue = "";     try {         rtnValue = cell.getStringCellValue();     }catch(IllegalStateException e) {         rtnValue = Integer.toString((int)cell.getNumericCellValue());                 }     return rtnValue; }

 

---

 

 

3. service

/*엑셀 업로드 엑셀 USER_ID를 통해 LIST값 가져옴*/ Map<String, Object> uploadExcel(List<PushVO> excelListVO) throws Exception;

 

---

 

4. serviceImpl

@Override public Map<String, Object> uploadExcel(List<PushVO> excelListVO) throws Exception {          Map<String, Object> result = new HashMap<String, Object>();          try {         String userIdArray[] = new String[excelListVO.size()];                  for(int idx=0; idx<excelListVO.size(); idx++) {               userIdArray[idx] = excelListVO.get(idx).getUserId();         }                      //리스트 받아오기         PushVO pushVO = new PushVO();                      pushVO.setUserIdArray(userIdArray);         List<PushVO> userList = pushDao.uploadExcel(pushVO);                      result.put("userList", userList);                  } catch(Exception e){         e.printStackTrace();        }          return result;     }

 

 

---

 

5. mapper

// 엑셀 업로드 / 엑셀 USER_ID를 통해 LIST값 가져옴 List<PushVO> uploadExcel(PushVO pushVO) throws Exception;

 

---

 

6. sql

<!-- 엑셀 업로드를 통해 데이터를 가져옴 --> <select id="uploadExcel" parameterType="pushVO" resultType="pushVO">      SELECT          (row_number() over()) as rowNum,            USER_ID,            USER_NM,            USER_NO,            FN_GET_MASK_PHN_NO(PHN_NO, 'Y') as PHN_NO      FROM SVC_USER      WHERE USER_ID IN (     <foreach collection="userIdArray" item="userId" index="index" separator=",">         #{userId}        </foreach>        ) </select>