====== 파일 업로더 이미지 파일 크기 줄임 가이드 ====== 이 화면은 FileUpload 컴포넌트를 이용해서 이미지 파일 업로드시 이미지 파일 크기를 줄이는 샘플 화면이다. 이미지 파일 크기를 줄이기 위해서는 이미지 컴포넌트가 필요한다. ===== 예시 ===== 템플릿 위치: /HTML5/COMPONENT/FILEUPLOADER/fileuploader_imageresize 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILEUPLOADER/fileuploader_imageresize.xml|fileuploader_imageresize.xml]] * [[xf5projecthome>template/screen/HTML5/COMPONENT/FILEUPLOADER/fileuploader_imageresize.js|fileuploader_imageresize.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/FILEUPLOADER/fileuploader_imageresize|새창으로 실행]] 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) { 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(); }