파일 업로더 이미지 파일 크기 줄임 가이드

이 화면은 FileUpload 컴포넌트를 이용해서 이미지 파일 업로드시 이미지 파일 크기를 줄이는 샘플 화면이다.

이미지 파일 크기를 줄이기 위해서는 이미지 컴포넌트가 필요한다.

템플릿 위치: /HTML5/COMPONENT/FILEUPLOADER/fileuploader_imageresize

템플릿 파일

• fileuploader_imageresize.xml
• fileuploader_imageresize.js
• 새창으로 실행

// 툴 설치 디렉토리\technet\project\template\ext\java\fileuploader.jsp.txt 파일을 fileuploader.jsp 이름으로 변경후,
// 해당 파일을 WAS 서버에 적용하고, 해당 서버 URL로 아래의 base_url 변수값을 변경후 테스트 진행해야 함
var base_url = "http://127.0.0.1:8080/xframe5/fileuploader.jsp";

function screen_on_load()
{
	// 파일 업로드 대상 URL 지정
	uploader_basic.seturl(base_url);
}

// 파일 추가 버튼 이벤트 처리
function btn_addfile_on_mouseup(objInst)
{
	uploader_basic.addfile();
}

// 모든 파일 삭제 버튼 이벤트 처리
function btn_deleteallfile_on_mouseup(objInst)
{
	// 모든 업로드 대상 파일 삭제
	uploader_basic.deleteallfile();
}

// 업로드 상태 초기화 버튼 이벤트 처리
function btn_clearallfilestatus_on_mouseup(objInst)
{
	// 모든 파일에 대한 업로드 상태 초기화
	uploader_basic.clearallfilestatus();

	// 업로드 상태 초기화를 그리드에 표시
	UpdateFileStauts(-1);
}

// 업로드 시작 버튼 이벤트 처리
function btn_startupload_on_mouseup(objInst)
{
	var i, file_count, file_object;

	// 업로드 대상 파일 오브젝트 파일 유형 및 크기 정보를 기준으로
	// 이미지 크기 축소 처리 대상 데이터 설정 (setfiledata)
	file_count = uploader_basic.getfilecount();
	for (i = 0; i < file_count; i++) {
		file_object = uploader_basic.getfileobject(i);

		// 이미지 파일 축소 처리 완료 값 설정
		uploader_basic.setfileuserdata(i, "1");

		// 파일 오브젝트 이미지 파일인지 검사
		if (factory.isimagefileobject(file_object)) {
			// TODO: 이미지 파일 크기 이미지 파일 크기 4K 이상인 경우 검사
			if (file_object.size > 4096) {
				// 이미지 파일 축소 처리 대상 값 설정
				uploader_basic.setfileuserdata(i, "0");
			}
		}
	}

	// 이미지 파일 줄임 처리 시작
	ReduceImageFileSize();
}

// 이미지 파일 크기 감소 처리
function ReduceImageFileSize()
{
	var i, file_count;

	file_count = uploader_basic.getfilecount();
	for (i = 0; i < file_count; i++) {
		// 이미지 파일 축소 완료 상태 검사
		if (uploader_basic.getfileuserdata(i) == "1") {
			continue;
		}

		// 이미지 컴포넌트에 이미지 표시
		img_resize.setimageobject(uploader_basic.getfileobject(i));
		img_resize.setuserdata(uploader_basic.getfilename(i));

		return;
	}

	// 업로드 대상 파일 상태 정보를 그리드에 다시 표시
	ReloadFileStatus();

	// 이미지 파일 줄임 처리 완료, 업로드 시작
	uploader_basic.startupload();
}

function img_resize_on_load(objInst, nImageWidth, nImageHeight)
{
	var i, count, reduce_width, reduce_height, file_name, file_object;

	// 원본 이미지 크기에 해당하는 이미지에 대한 파일 오브젝트 생성
	file_name = this.img_resize.getuserdata();
	if (!file_name) { return; }

	file_object = this.img_resize.getimagefileobject(file_name, 1);
	factory.consoleprint("before> " + file_object.name + ", size = " + file_object.size);

	// 50%로 크기 변경 (TODO: 파일 크기에 따라 조정해야 함)
	reduce_width = parseInt(nImageWidth * 0.5);
	reduce_height = parseInt(nImageHeight * 0.5);
	objInst.setsize(reduce_width, reduce_height);

	// 크기에 맞는 이미지 파일 오브젝트 생성
	file_object = this.img_resize.getimagefileobject(file_name, 2, reduce_width, reduce_height);
	factory.consoleprint("after> " + file_object.name + ", size = " + file_object.size);

	file_count = uploader_basic.getfilecount();
	for (i = 0; i < file_count; i++) {
		// 이미지 파일 축소 완료 상태 검사
		if (uploader_basic.getfileuserdata(i) == "1") {
			continue;
		}

		// 업로드 대상 파일 오브젝트를 변경된 이이지 파일 오브젝트로 변경
		uploader_basic.setfileobject(i, file_object);

		// 이미지 파일 축소 처리 완료 값 설정
		uploader_basic.setfileuserdata(i, "1");

		// 이미지 파일 크기 줄임 함수 호출
		ReduceImageFileSize();
	}
}

// 업로드 중지 버튼 이벤트 처리
function btn_stopupload_on_mouseup(objInst)
{
	uploader_basic.stopupload();
}

// 업로드 파일 상태 정보 업데이트 처리
function UpdateFileStauts(nFileIndex)
{
	var count, i;

	// 파일 인덱스가 -1인 경우, 전체 파일 목록에 대해서 업데이트 처리
	if (nFileIndex == -1) {
		count = uploader_basic.getfilecount();
		for (i = 0; i < count; i++) {
			UpdateOneFileStauts(i);
		}
	}
	// 파일 인덱스가 -1이 아닌 경우, 특정 파일에 대해서 업데이트 처리
	else {
		UpdateOneFileStauts(nFileIndex);
	}
}

// 업로드 대상 파일 목록 정보를 그리드에 다시 표시
function ReloadFileStatus()
{
	var nFileIndex, count;

	// 그리드 내용 전체 지움
	grdList.deleteall();

	// 업로드 대상 파일 갯수만큼 Loop를 돌면서 그리드에 추가
	count = uploader_basic.getfilecount();
	for (nFileIndex = 0; nFileIndex < count; nFileIndex++) {
		grdList.additem();

		grdList.setitemtext(nFileIndex, 0, uploader_basic.getfilename(nFileIndex));
		grdList.setitemtext(nFileIndex, 1, uploader_basic.getfilesize(nFileIndex));
		grdList.setitemtext(nFileIndex, 2, uploader_basic.getfilebriefsize(nFileIndex));
		grdList.setitemtext(nFileIndex, 3, uploader_basic.getfiledate(nFileIndex));
		grdList.setitemtext(nFileIndex, 4, uploader_basic.getfiletime(nFileIndex));

		UpdateOneFileStauts(nFileIndex);
	}
}

// 한 파일에 대한 업로드 상태 표시 업데이트
function UpdateOneFileStauts(nFileIndex) {
	grdList.setitemtext(nFileIndex, 5, uploader_basic.getfilestatus(nFileIndex));
	grdList.setitemtext(nFileIndex, 6, uploader_basic.getfileprogress(nFileIndex));
	grdList.setitemtext(nFileIndex, 7, uploader_basic.getfileresult(nFileIndex));
	grdList.setitemtext(nFileIndex, 8, uploader_basic.getfileresultmsg(nFileIndex));
	grdList.setitemtext(nFileIndex, 9, uploader_basic.getfileresultfilename(nFileIndex));
}

/////////////////////////////////////////////////////////////////////////////////////////////
// EVENT
/////////////////////////////////////////////////////////////////////////////////////////////

// 그리드 파일 드롭 이벤트 처리 (탐색시에서 파일 Drag&Drop 처리시 발생함)
function grdList_on_dropfiles(objInst, arrayDropFiles, nDropFileCount)
{
	var 	i, fileObj;

	// 드롭된 파일 갯수 및 파일 정보를 콘솔에 출력
	factory.consoleprint("nDropFileCount = " + nDropFileCount);
	for (i = 0; i < nDropFileCount; i++) {
		fileObj = arrayDropFiles[i];
		factory.consoleprint(i + " : fileObj.name = " + fileObj.name);
		factory.consoleprint(i + " : fileObj.size = " + fileObj.size);
	}

	// 드롭된 파일 오브젝트 배열을 업로드 대상에 추가
	uploader_basic.addfileobjectarray(arrayDropFiles);
}

// 파일 업로드 컴포넌트 개별 파일 업로드 진행 상태 이벤트 처리
function uploader_basic_on_fileprogress(objInst, nFileIndex, strFileName, nPos)
{
	// 파일 업로드 진행 상태 업데이트
	grdList.setitemtext(nFileIndex, 6, nPos);
}

// 파일 업로드 컴포넌트 개별 파일 럽로드 완료 이벤트 처리
function uploader_basic_on_filecomplete(objInst, nFileIndex, strFileName)
{
	// 파일 업로드 완료 상태 업데이트
	UpdateOneFileStauts(nFileIndex);
}

// 파일 업로드 컴포넌트 업로드 대상 목록 변경 이벤트 처리
function uploader_basic_on_listupdate(objInst)
{
	// 업로드 대상 파일 목록 정보를 그리드에 다시 표시
	ReloadFileStatus();
}