guide:component:file:file_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 파일 기본 가이드======

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

파일 컴포넌트는 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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILE/file_basic.xml|file_basic.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILE/file_basic.js|file_basic.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/FILE/file_basic|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/FILE/file_basic"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
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);
}
</sxh>