1. pom.xml 설정
2. context.xml 설정
3. 사용자단 소스
4. 자바단 소스
1. pom.xml 설정
<!-- file upload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
2. context.xml 설정
<!-- MULTIPART RESOLVERS -->
<!-- regular spring resolver -->
<bean id="spring.RegularCommonsMultipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="600000000" />
<property name="maxInMemorySize" value="100000000" />
</bean>
3. 사용자단 소스
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="Amway Academy">
<meta name="keywords" content="Amway Academy">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Amway Academy 관리자</title>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript">
$(document.body).ready(function(){
$("#insertBtn").on("click", function(){
imageSubmit();
});
});
var imageSubmit = function(){
// 저장전 Validation
if($("#courseimagefile").val().length<1 && $("#courseimage").val().length<1){
alert("대표이미지를 등록해 주세요.");
return;
}
var fileYn = false;
$( "input:file" ).each(function( index ){
if($( this ).val().length>0 ){
fileYn = true;
}
});
if(!fileYn){
saveSubmit();
return;
}
$("#frm").ajaxForm({
dataType:"json",
data:{mode:"course"},
url:'/common/fileUploadAjax.do',
beforeSubmit:function(data, form, option){
return true;
},
success: function(result, textStatus){
for(i=0; i<result.length;i++){
$("#"+result[i].fieldName+"file").val(result[i].FileSavedName);
if(result[i].fieldName == "filedown"){
$("#"+result[i].fieldName+"file").val( result[i].OriginalFilename + "|" + result[i].FileSavedName );
}
}
saveSubmit();
},
error: function(){
alert("파일업로드 중 오류가 발생하였습니다.");
return;
}
}).submit();
}
var saveSubmit = function(){
alert("저장")
}
/** 이미지 미리보기
*
*/
function getThumbnailPrivew(html, $target, w, h) {
if(html.value == ""){
return;
}
var _lastDot = html.value.lastIndexOf('.');
var fileExt = html.value.substring(_lastDot+1, html.value.length).toLowerCase();
/*
if( fileExt != "jpg" && fileExt != "gif" && fileExt != "png" ) {
alert("이미지 파일(jpg,gif,png)만 입력하세요.");
try{$(html).replaceWith($(html).clone(true))}catch(e){};
try{html.value = ""}catch(e){};
return;
}
*/
if (html.files && html.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$target.css('display', '');
var wStr = "";
var hStr = "";
if(w !='' && w != null ){
wStr = "width="+w;
}
if(h !='' && h != null ){
hStr = "height="+h;
}
$target.html('<img src="' + e.target.result + '" border="0" alt="" '+wStr+' '+hStr+' />');
}
reader.readAsDataURL(html.files[0]);
}
}
</script>
</head>
<body>
<form id="frm" name="frm" method="post">
<table>
<tr>
<th rowspan="3">대표이미지</th>
<td rowspan="2">
<div id="courseimageView" style="width:140px;height:80px;float:left;" class="required">
<c:if test="${not empty detail.courseimage}"><img src="/manager/lms/common/imageView.do?file=${detail.courseimage}&mode=course" width="120" style="max-height:80px;"></c:if>
</div>
</td>
<td>
<input type="hidden" id="courseimagefile" name="courseimagefile" value="${detail.courseimage}" title="대표이미지" />
<input type="file" id="courseimage" name="courseimage" onchange="getThumbnailPrivew(this,$('#courseimageView'), 120 , 80);" title="대표이미지"><br />
</td>
</tr>
</table>
<a href="javascript:;" id="insertBtn" class="btn_green">저장</a>
</form>
</body>
</html>
4. 자바단 소스
@RequestMapping(value = "/common/fileUploadAjax.do", method = RequestMethod.POST)
public ModelAndView fileUploadAjax(MultipartHttpServletRequest request, ModelAndView mav ) throws Exception {
Map<String, Object> rtnMap = new HashMap<String, Object>();
String mode = request.getParameter("mode");
String name = request.getParameter("name");
String childFolder = "temp";
if("stamp".equals(mode)){
childFolder = "stamp";
}else if("course".equals(mode)){
childFolder = "course";
}else if("test".equals(mode)){
childFolder = "test";
}else if("excel".equals(mode)){
childFolder = "excel";
}
//folder mkdir
File saveFolder = new File(ROOT_UPLOAD_DIR+File.separator+childFolder);
if(!saveFolder.exists() || saveFolder.isFile()){
saveFolder.mkdirs();
}
//iterator
Iterator<String> files = request.getFileNames();
MultipartFile multipartFile;
String filePath;
List<Map<String, Object>> fileInfoList = new ArrayList<Map<String,Object>>();
try{
//while
while(files.hasNext()){
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
multipartFile = request.getFile((String)files.next());
String fieldName = multipartFile.getName();
String extName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".")+1 );
String filename = uuid+"."+extName;
filePath = ROOT_UPLOAD_DIR+File.separator+childFolder+File.separator+filename;
if( filename != null && !"".equals(multipartFile.getOriginalFilename()) ){
multipartFile.transferTo(new File(filePath));
Map<String, Object> map = new HashMap<String, Object>();
map.put("fieldName", fieldName);
map.put("FilePath", filePath);
map.put("OriginalFilename", multipartFile.getOriginalFilename());
map.put("extName", extName);
map.put("FileSize", multipartFile.getSize());
map.put("FileSavedName", filename);
fileInfoList.add(map);
}
}
}catch(IOException e){
e.printStackTrace();
}
int sizeCheck = 0;
if(fileInfoList != null && fileInfoList.size() > sizeCheck){
rtnMap = fileInfoList.get(0);
}
mav.setView(new JSONView());
mav.addObject("JSON_OBJECT", fileInfoList);
return mav;
}
핵심은 jquery.form.js 를 이용해서 비동기로 파일을 업로드 한다
파일을 업로드 하기 위해서는 common-fileupload 와 common-io 자르가 필요하다.
multipartResolver를 선언해 주고
비동기로 파일을 업로드 한다.