파일 업로더 파일 미리보기 가이드

이 화면은 FileUpload 컴포넌트에 대한 샘플 화면이다.

FileUpload 컴포넌트는 HTTP Multipart 통신 프로토콜 표준을 따르는 파일 업로드 처리 컴포넌트이다.

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

템플릿 파일

• fileuploader_preview.xml
• fileuploader_preview.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)
{
	file01.selectfiles();
//	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)
{
	uploader_basic.startupload();
}

// 업로드 중지 버튼 이벤트 처리
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();
}

function file01_on_selectfiles(objInst, arrFiles)
{
	if (arrFiles.length == 0) return;

	uploader_basic.addfileobjectarray(arrFiles);
}

function file01_on_readastext(objInst, strText)
{
	fld_textpreview.settext(strText);
}

function file01_on_readasdataurl(objInst, strData)
{
	img_preview.setimagedata(strData);
}

function grdList_on_itemselchange(objInst, nPrevSelectRow, nPrevSelectColumn, nCurSelectRow, nCurSelectColumn)
{
	var file_object, file_type;

	if (nPrevSelectRow == nCurSelectRow) { return; }

	fld_textpreview.settext("");
	img_preview.setimagedata("");

	file_object = uploader_basic.getfileobject(nCurSelectRow);
	if (file_object) {
		file_type = file01.getfiletype(file_object);

		factory.consoleprint("file_type = " + file_type);

		if (file_type.indexOf("text") >= 0) { file01.readastext(file_object); }
		else if (file_type.indexOf("image") >= 0) { file01.readasdataurl(file_object); }
	}
}