====== 파일 업로더 파일 미리보기 가이드 ====== 이 화면은 FileUpload 컴포넌트에 대한 샘플 화면이다. FileUpload 컴포넌트는 HTTP Multipart 통신 프로토콜 표준을 따르는 파일 업로드 처리 컴포넌트이다. ===== 예시 ===== 템플릿 위치: /HTML5/COMPONENT/FILEUPLOADER/fileuploader_preview 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILEUPLOADER/fileuploader_preview.xml|fileuploader_preview.xml]] * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILEUPLOADER/fileuploader_preview.js|fileuploader_preview.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/FILEUPLOADER/fileuploader_preview|새창으로 실행]] echo ''; echo ''; echo ''; ==== 화면 스크립트 ==== // 툴 설치 디렉토리\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); } } }