파일 기본 가이드

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

파일 컴포넌트는 HTML의 file타입 input 태그를 이용한 컴포넌트이다.

selectfiles, readastext, readasdataurl API는 비동기로 각각의 이벤트(on_selectfiles, on_readastext, on_readasdataurl)를 통해서 결과가 전달된다.

관련 속성으로 use_filepath가 있다.

관련 이벤트로 on_selectfiles, on_readastext, on_readasdataurl가 있다.

템플릿 위치: /HTML5/COMPONENT/FILE/file_basic

템플릿 파일

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

function initialize() {
	grd01.deleteall();
	fldFileText.settext("");
	img01.setimagedata("");
}

////////////////////////////////////////////////
// API

// 파일 선택
function btnSelectFiles_on_mouseup(objInst)
{
	initialize();
	file01.selectfiles(cb01.getselectedcomment(), chk01.getcheck());
}

// 텍스트파일 읽기
function btnReadAsText_on_mouseup(objInst)
{
	initialize();
	file01.readastext(null, cb02.getselectedcomment());
}

// 파일을 선택하여 DataURL 읽기
function btnReadAsDataUrl_on_mouseup(objInst)
{
	initialize();
	file01.readasdataurl(null, "image/*");
}

////////////////////////////////////////////////
// Event

// selectfiles API를 통해 파일선택대화상자에서 파일 선택시 발생하는 이벤트
// arrFiles : 파일목록
function file01_on_selectfiles(objInst, arrFiles)
{
	for(var i=0; i<arrFiles.length; i++) {
		var nRow = grd01.additem();
		grd01.setitemtext(nRow, 0, file01.getfilename(null, i));
		grd01.setitemtext(nRow, 1, file01.getfiletype(null, i));
		grd01.setitemtext(nRow, 2, file01.getfilesize(null, i));

	}
}

// readastext API를 통해 파일선택대화상자에서 파일 선택시 발생하는 이벤트
// strText : 문자열
function file01_on_readastext(objInst, strText)
{
	fldFileText.settext(strText);
}

// readasdataurl API를 통해 파일선택대화상자에서 파일 선택시 발생하는 이벤트
// strData : DataURL 문자열
function file01_on_readasdataurl(objInst, strData)
{
	// fld02.settext(strData);
	img01.setimagedata(strData);
}