OPEN

file upload 를 구현한다.

DB 에 입력되는 것을 디스크에 저장되도록 수정한다.

글로벌 프로퍼티 설정

# for JFile properties
system.uploadpath = /upload

자바에서 해당 값을 주입합니다.

snippet.java

@Value("#{global['system.uploadpath']}")
private String fileBasePath;

Value 어노테이션 사용을 위해 임포트를 추가합니다.

snippet.java

import org.springframework.beans.factory.annotation.Value;

리퀘스트 맵핑을 등록하고 함수를 구현합니다.

snippet.java

@RequestMapping("/fileUploadDisk.json")
public void fileUploadDisk(RMap rmap, ModelMap model, @RequestParam("file") MultipartFile file) throws IOException {
    //
}

@RequestParam(“file”)를 통해서 멀티파트파일 정보는 file 변수에 담기게 됩니다.

업로드 대상 URL 정보를 위에서 설정한 주소로 변경합니다.

snippet.javascript

url : "/web/common/file/fileUploadDisk.json"

jQuery.uploadfile 플러그인을 사용중이므로 아래와 같이 설정합니다.

snippet.javascript

// 파일 업로드
upload = $("#spreadRegistFile").uploadFile({
	url : "/file/fileUploadDisk.json",
	fileName : "file",
	autoSubmit : false,
	dragDropStr : '',
	uploadStr : '등록',
	showQueueDiv : 'spreadRegistFileQueue',
	dragdropWidth : 150,
	statusBarWidth : 140,
	maxFileCount : 5,
	showError : false,
	showProgress : false,
	onSuccess : function(files, data, xhr, pd) {
		toast.push(Object.toJSON(files));
		upload.reset();
	},
	onError : function(files, status, errMsg, pd) {
		toast.push(errMsg);
	}
});

cbOJ36

snippet.java

public int insertFileInfo(RMap rmap, ModelMap model) {
	rmap.put("user_id", rmap.getSession().getAttribute("user_id"));
	return dao.insert("web.common.insertFileInfo", rmap);
}

insert 태그 추가

snippet.xml

<insert id="insertFileInfo">
		/* web.common.insertFileInfo */
       ...
</insert>

저장할 대상

- #{file_seq}
- #{file_size} 
- #{file_type}
- #{original_file_name}
- #{file_name}
- #{file_path}

snippet.xml

<!-- 파일 등록 -->
<insert id="insertFileInfo">
	/* web.common.insertFileInfo */
	INSERT INTO FILE_INFO
	(
		FILE_SEQ
		, FILE_NO
		, FILE_SIZE
		, FILE_TYPE
		, ORIGINAL_FILE_NAME
		, FILE_NAME
		, FILE_PATH			
		, REG_USER
		, REG_DATE
		, LAST_DATE			
	)
	VALUES
	(
		#{file_seq}
		, (SELECT COALESCE(MAX(FILE_NO),0)+1 FROM FILE_INFO WHERE FILE_SEQ = #{file_seq})
		, #{file_size}
		, #{file_type}
		, #{original_file_name}
		, #{file_name}
		, #{file_path}
		, #{user_id}
		, TO_CHAR(NOW(), 'YYYYMMDDHH24MISS')
		, TO_CHAR(NOW(), 'YYYYMMDDHH24MISS')			
	)		
</insert>

저장된 것을 확인한다.
RCWPyw

조회시에, original_file_name을 가져오도록 수정.
화면 출력시에도 이름 변경해야 함.

파일을 선택했을 때, 요청하는 부분을 수정하자.

이미지의 경우 팝업 화면을 보여주고, 동영상의 경우 다운로드 되도록 처리한다.

snippet.html

onclick="wutil.popup(seq, no)"

snippet.javascript

url : "/file/attachPop.do",

JSP에서 이미지를 요청한다.

snippet.html

<img src="<c:url value='/web/common/file/attachImage.do?seq=${seq}&no=${no}'/>" width="550" />

snippet.java

UMap umap = commonService.selectAttachFile(rmap, model);

snippet.html

onclick="wutil.download(seq, no)"

snippet.javascript

window.location = "/file/fileDownload.do?seq=" + seq + "&no=" + no;

Plugin Backlinks: 아무 것도 없습니다.

controller 구현

service 구현

mybatis 구현

파일 불러오기

이미지

동영상

관련 문서

Various Ways