2020. 5. 15. 18:00

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. 사용 방법
'DG_JsFileSelector'를 생성해 줍니다.

이때 사용할 영역을 '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
기본 함수 바로가기

확장자를 검사해서 미리보기 영역에 아이콘 혹은 이미지를 출력한다.
null이면 기본 함수를 사용한다.


@param {string} sExt 검사할 확장자
@returns {string} 이미지 주소.(ImgDomSet 참고)
빈값이면 자체적으로 판단된다.(url이 있으면 url을 따라가고 아니면 기본 이미지)

"IMAGE"를 리턴하면 로컬파일은 비동기 이미지를 출력, 서버파일은 url를 넣는다.

NoneFileImgUrl

string
"이미지 파일 경로"

별도 처리 없는(확장자 검사에서 빈값) 이미지에 사용할 이미지

LoadingSrc

string
"로딩 이미지 바이너리"

파일을 읽어들이는게 끝나지 않을때 사용할 이미지

로컬 파일을 로드하는 동안 표시될 이미지

FileSizeString_SI bool
true
파일 사이즈를 문자열로 바꿀때 SI(국제단위계)사용여부
FileSizeString

function
기본 함수 바로가기

파일사이즈를 문자열로 바꾸는 함수.

@param {int} nSizeLength 바꿀 사이즈
@param {bool} bSI SI(국제단위계) 사용여부
@returns {string} 완성된 문자열

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

수정 여부.
파일의 정보가 수정되었을때 true로 바뀐다.

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에서 판단한 정보를 가지고 이미지를 출력한다.
로컬파일일때는 objImage에 base64기반 바이너리 정보를,

외부 파일일때는 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

- 구현 완료