DG JsFileSelector 0.8 - 'Jquery'기반 파일 선택 인터페이스
DG_JsFileSelector 0.8
- 파일 드래그 엔 드롭 기능
- 파일 선택 기능
- 서버 업로드를 위한 개체 제공
라이브러리 테스트 : https://dang-gun.github.io/DG_JavaScript_Utility/DG_JsFileSelector/DG_JsFileSelector.html
프로그램 소스 : github - dang-gun/DG_JavaScript_Utility/DG_JsFileSelector
Author : Dang-Gun Roleeyas ( http://blog.danggun.net/ )
Create date : 2020.04.24
License : MIT( https://opensource.org/licenses/MIT )
사용기술 : javascript, jQuery
유틸리티 설명
파일 선택 UI만 제공하는 유틸리티입니다.
드래그 엔 드롭과 브라우저의 파일선택기능, 파일 정보를 입력하는 기능을 지원합니다.
업로드를 위한 개체가 제공됩니다. (바이너리 정보 포함)
직접 업로드하는 기능은 제공되지 않습니다.
업로드된 파일의 정보를 받아 표시할 수 있습니다.
1. 주요 기능
- 파일 리스트 UI 생성
- 파일 드래그 엔 드롭
- 파일 선택
- 외부 파일 정보 입력
- 업로드용 개체 출력
- 확장자에 따른 별도 처리
- 삭제 정보 전달
2. 사용 방법
이때 사용할 영역을 'Area'로 전달해 줍니다.
1 2 3 4 | var dgFS = new DG_JsFileSelector({ Area: $("#divOutput"), Debug: true }); | cs |
생성이 성공하면 드래그엔 드롭 영역이 생성됩니다.
2-1. 파일 리스트 받기
'ItemList_Get'함수를 호출하여 파일 리스트를 받을 수 있습니다.
1 | console.log(dgFS.ItemList_Get()); | cs |
로컬파일인 경우 'Binary' 속성에 베이스64(base64) 기반의 바이너리 정보가 저장되어 있습니다.
이 정보를 필요한 곳에 전달하여 사용합니다.
예> 서버로 전달하여 업로드 기능을 구현할 수 있음.
첨부된 파일 삭제 시 'idFile'속성이 0이하이면 리스트에서 제외되어 리턴되지 않습니다.
2-2. UI에 파일 정보 추가하기
UI에 파일 정보를 추가하려면 'DG_JsFileSelector.prototype.jsonItemDefult' 형식의 파일 정보를 만들어
'FileAdd_UI_List' 함수에 전달합니다.
로컬파일인 경우 'Binary' 속성에 베이스64(base64) 기반 바이너리 정보를 전달해야 합니다.
로컬 파일이 아닌 경우 'BinaryIs'속성을 'false'로 전달해야 합니다.
첨부된 파일 삭제 시 'idFile'속성이 0이하이면 리스트에서 제외되어 리턴되지 않습니다.
임의로 파일을 추가할 때는 상황에 맞게 'idFile'속성에 값을 넣습니다.
3. API
API Document
3-1. 개체 생성 옵션
'DG_JsFileSelector.prototype.jsonOptoinDefult' 참고
| 이름 |
타입 기본값 |
설명 |
| Debug |
bool false |
디버그 활성화 여부 |
| Area |
dom null |
드롭다운 영역이자 아이템 표시에 사용할 영역 |
| Area_ItmeList |
dom null |
아이템이 그려질 완성된 영역. 사용자가 전달하는 값이 아니라 완성된 영역에 접근할 필요가 있을때 사용한다. |
| ExtAllow |
array ["*.*"] |
허용된 확장자 리스트(소문자로 입력). 전체허용은 "*.*" 허용할 확장자를 배열(array)형태로 전달해야 합니다. 예> 이미지 파일만 [".bmp", ".dib", ".jpg", ".jpeg", ".jpe", ".gif", ".png", ".tif", ".tiff", ".raw"] |
| ExtToImg |
function |
확장자를 검사해서 미리보기 영역에 아이콘 혹은 이미지를 출력한다. @param {string} sExt 검사할 확장자 "IMAGE"를 리턴하면 로컬파일은 비동기 이미지를 출력, 서버파일은 url를 넣는다. |
| NoneFileImgUrl | string |
별도 처리 없는(확장자 검사에서 빈값) 이미지에 사용할 이미지 |
| LoadingSrc | string |
파일을 읽어들이는게 끝나지 않을때 사용할 이미지 로컬 파일을 로드하는 동안 표시될 이미지 |
| FileSizeString_SI | bool true |
파일 사이즈를 문자열로 바꿀때 SI(국제단위계)사용여부 |
| FileSizeString |
function |
파일사이즈를 문자열로 바꾸는 함수. |
| LoadComplete | function |
선택한 파일의 모든 처리가 끝났을때 이벤트 @param {object} objThis 최상위 부모 개체 |
| DeleteComplete | function 기본 함수 바로가기 |
파일 지우기가 완료되면 전달할 이벤트
@param {json} jsonFIle 아이템으로 사용하는 파일 정보(참고 : DG_JsFileSelector.prototype.jsonItemDefult) @param {dom} domDivItme 지울 대상 |
3-2. 파일 정보
아이템으로 사용하는 파일 정보의 구조.
'DG_JsFileSelector.prototype.jsonItemDefult' 참고
| 이름 |
타입 기본값 |
설명 |
| Name | string |
파일 이름 |
| Extension |
string |
파일 확장자 |
| Size |
long |
파일 크기 |
| Type |
string "" |
파일 타입 정보 |
| Description |
string |
파일에 대한 설명 |
| EditorDivision | string "" |
에디터에서 사용될 파일 구분값. 에디터와 같은 다른 인터페이스에서 파일을 구분하기위해 사용하는 문자열. |
| BinaryIs | bool false |
바이너리 정보를 사용할지 여부.
이것이 true이면 동적으로 바이너리 정보를 읽어 미리보기이미지로 출력하게 된다. 이미 처리된 데이터인경우 이것이 false가 되어야 한다. |
| BinaryReadyIs | bool false |
바이너리 정보를 사용할때 바이너리 데이터가 준비가 끝났는지 여부 |
| Binary | bool false |
로컬파일인 경우 파일의 바이너리 정보 |
| idFile |
int 0 |
파일이 업로드되어 있을때 고유 번호. 로컬에서 추가된 파일은 이 번호가 0이된다. |
| Url | string |
파일이 업로드 되어 있는 상태에 가지고 있는 url
|
| Edit | bool false |
수정 여부. |
| Delete | bool false |
삭제 여부
파일이 삭제되었을대 true로 바뀐다. |
3-3. 메소드
자바스크립트
| 이름 | 매개변수 | 설명 |
| Reset(jsonOptoin) | @param {json} jsonOptoin 'DG_JsFileSelector.prototype.jsonOptoinDefult'형식의 데이터 |
개체를 다시 설정한다.
기존 개체를 지우고 다시 생성한다. |
| ExtToImg(sExt) | @param {string} sExt 검사할 확장자
@returns {string} 이미지 주소.(ImgDomSet 참고) 빈값이면 자체적으로 판단된다.(url이 있으면 url을 따라가고 아니면 기본 이미지) "IMAGE"를 리턴하면 로컬파일은 비동기 이미지를 출력, 서버파일은 url를 넣는다. |
확장자 검사. 확장자를 어떻게 처리할지를 판단한다. |
| OnFileChange(event, objThis, eventThis) | @param {Event} event 전달 받은 이벤트 개체 @param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트 @param {object} eventThis 이벤트가 발생할때 자신의 오브젝트 |
파일 선택창에서 파일 선택시 이벤트 |
| OnDrop(event, objThis, eventThis ) | @param {Event} event 전달 받은 이벤트 개체 @param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트 @param {object} eventThis 이벤트가 발생할때 자신의 오브젝트 |
파일을 드래그해서 영역에 놨을때 발생하는 이벤트 |
| OnDragover(event, objThis, eventThis) | @param {Event} event 전달 받은 이벤트 개체 @param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트 @param {object} eventThis 이벤트가 발생할때 자신의 오브젝트 |
파일을 드래그해서 영역에 올라왔을때 이벤트 |
| FileAdd_JsonList(objThis, arrFile) |
@param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트
@param {array} arrFile 브라우저에서 넘어온 파일 정보 배열 |
파일 추가 - 리스트 |
| FileAdd_JsonItem(jsonFile) | @param {json} jsonFile 브라우저에서 넘어온 파일 정보 | 파일 추가 - 아이템 |
| FileAdd_UI_List(arrFileInfoList) | @param {array} jsonFileInfo 'DG_JsFileSelector.prototype.jsonItemDefult' 형식의 배열 |
완성된 리스트를 UI에 출력.
완성된 리스트라는 것은 로딩이 끝난데이터를 말한다. 외부에서 완성된 데이터 리스트를 받아 UI에 바인딩할때 사용한다. |
| FileAdd_UI(jsonFileInfo, jsonFile) | @param {json} jsonFileInfo 'DG_JsFileSelector.prototype.jsonItemDefult' 형식의 데이터 @param {json} jsonFile (선택)브라우저에서 넘어온 파일 원본 정보. 바이너리 정보를 사용하지 않을때는 필요없다. |
UI에 출력.
완성된 json 파일을 출력할때 사용한다. 파일 인터페이스에서 넘어온 데이터는 'FileAdd_JsonItem'를 타고 들어와야 한다. |
| LoadComplete(objThis) | @param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트 |
바이너리 정보의 로드가 완료되었을때 동작할 이벤트 |
| ImgDomSet(domImg, sImgUrl, objImage) | @param {dom} domImg 이미지를 출력할 dom @param {string} sImgUrl ExtToImg에서 판단하여 넘겨받은 정보 @param {byte | string} objImage "IMAGE"일때 출력할 이미지 정보 |
ExtToImg에서 판단한 정보를 가지고 이미지를 출력한다.
외부 파일일때는 Url을 전달한다. |
| ItemList_Delete(objThis, jsonFIle, domDivItme) |
@param {object} objThis 이벤트를 생성할때 전달한 자신의 오브젝트 @param {json} jsonFIle 아이템으로 사용하는 파일 정보(참고 : DG_JsFileSelector.prototype.jsonItemDefult) @param {dom} domDivItme 지울 대상 |
선택된 개체를 지운다. |
| ItemList_Cleaning() | 없음 |
아이템 리스트를 정리한다.
서버에 전달할 필요가 없는 아이템을 제외한다. 예> 파일 아이디가 없는데 삭제 데이터다. |
| ItemList_Get() |
@returns {array} 가지고 있는 아이템 리스트 |
가지고 있는 아이템 리스트를 전달리턴한다. |
| OpenFileSelection() |
없음 |
파일 선택창을 연다. |
수정 이력
2020.05.10 - 0.8
- 구현 완료