ajax 파일 업로드 - Multipartparser

ajax로 파일 업로드를 한다.

 

먼저, form은

 

<form class="uploader" enctype="multipart/form-data" method ="post"> <input type="file" name="file" style="width: 82px; background-color: #f5f5f5; position: relative; bottom: 30px; cursor: pointer; opacity: 0;" onchange="javascript:copyPath(this);">' </form>

 

기본 제공하는 upload버튼 형식은 따로 설정이 불가능하다.

 

따라서 opacity: 0로 투명하게 설정해준 뒤 사용할 버튼과 겹치게 위치시킨다.

 

 

ajax 파일 업로드

//파일 업로드 function file_upload(tempImgClass, tempImgStatus) { var $this = $('.uploader input:file'); var length = $('.uploader input:file').length; var data = new FormData(); var imgClass = tempImgClass.toLowerCase(); var imgStatus = ((tempImgStatus == "S") ? "standby" : "active"); var Yn = ""; data.append("imgClass", imgClass); data.append("imgStatus", imgStatus); for(var i = 0; i<length; i++){ $.each($this[i].files, function(key, file) { data.append(file.name, file); $.ajax({ url: "/AjaxFileServiceRequestHandler.do", contentType:'multipart/form-data', type: 'POST', processData: false, async: false, data: data }) .done(function(response){ Yn = ((response.successYn == "N") ? true : false); // 용량 초과 여부 if(Yn) { fileSize = response.fileSize; } }) }); } return Yn; }

 

먼저 new FormData();

 

이후 파라미터 값을 append하면 파일업로드와 함께 넘어간다.

 

 

 

cos.jar 버전에 맞게 잘 설치하고..

 

파라미터가 있으니 multipartrequest보다는 multipartparser를 활용

Multipartparser로..

@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Properties prop = new Properties(); InputStream input = null; Map<String, Object> datum = new LinkedHashMap<String, Object>(); Gson gson = new Gson(); String json = ""; // file path String filePath = request.getSession().getServletContext().getRealPath("/")+"WEB-INF"+File.separator+"classes"+File.separator; input = new FileInputStream(filePath+"config.properties"); // load a properties file prop.load(input); // get the property value and print it out String savePath = prop.getProperty("savePath"); // file upload int maxSize = 1024 * 1024 * 1; // 1MB String imgClass = ""; String imgStatus = ""; String excelCheck = "N"; try{ MultipartParser mp = new MultipartParser(request, maxSize); // 파일 업로드 mp.setEncoding("euc-kr"); Part part; while((part = mp.readNextPart()) != null){ // get Parameter if(part.isParam()){ ParamPart paramPart = (ParamPart) part; String name = part.getName(); String value = paramPart.getStringValue(); if("imgClass".equalsIgnoreCase(name)){ imgClass = value; } else if("imgStatus".equalsIgnoreCase(name)){ imgStatus = value; } else if("excel".equalsIgnoreCase(name)){ savePath = prop.getProperty("excelSavePath"); excelCheck = "Y"; } // get File }else if(part.isFile()){ FilePart filePart = (FilePart) part; //filePart.setRenamePolicy(new DefaultFileRenamePolicy()); String fileName = filePart.getFileName(); String newFileName = "goodsCdList.xlsx"; if(fileName != null) { File dir = new File(savePath + imgClass + File.separator +imgStatus); if(!dir.exists()){ dir.mkdirs(); } // case. excel file if(excelCheck == "Y"){ File tempFolder = new File(dir, newFileName); filePart.writeTo(tempFolder); } // case. image file else { filePart.writeTo(dir); } } } } datum.put("successYn", "Y"); json = gson.toJson(datum); response.setContentType("application/json"); response.setCharacterEncoding("EUC-KR"); response.getWriter().write(json); } catch(IOException e) { String fileSize = String.valueOf(maxSize/(1024*1024)); System.out.println("\n※ 파일 용량 제한("+ fileSize+"MB) 초과"); datum.put("successYn", "N"); datum.put("fileSize", fileSize+"MB"); json = gson.toJson(datum); response.setContentType("application/json"); response.setCharacterEncoding("EUC-KR"); response.getWriter().write(json); } }

 

파라미터들 받고, 업로드까지 완료