파일을 업로드하는 가장 간단한 예제

설명

dx5.create 함수를 사용하여 컴포넌트를 생성할 때, 생성 옵션 중 btnUploadAuto 속성에 button, input[type=button] 요소의 아이디를 지정하면 자동으로 업로드 함수가 호출되는 이벤트를 연결한다.

<button id="btn-upload">파일 업로드</button>
<script>
  dx5.create({
    ...
    // 업로드를 수행할 버튼을 연결한다.
    btnUploadAuto: "btn-upload"
  });
</script>

파일을 업로드하려면 업로드를 처리할 서버 측 웹 경로를 설정해주어야 한다.

파일 업로드 경로는 업로드하기 전에 설정하면 되지만, 일반적으로 onDX5Created 콜백 함수에서 지정한다.

function onDX5Created(id) {
  var dx = dx5.get(id);
  // dx5.canonicalize 함수는 주어진 상대 경로에 대한 절대 경로(http, https 포함) 값을 반환하는 유틸 함수이다.
  dx.setUploadURL(dx5.canonicalize("../service/common-upload.asp"));
}

DEXTUploadX5는 파일을 보내는 sender 역할을 수행한다. 이와 달리 DEXTUpload Pro는 서버 측에 파일을 받는 receiver 역할을 담당한다.

이 샘플은 파일 업로드 처리를 common-upload.asp에서 담당한다.

RFC 1867 규약에 따라 multipart/form-data로 전송되는 데이터는 POST 형식으로 받아야 한다. common-upload.asp 서버 페이지는 DEXTUpload Pro의 FileUpload COM 객체를 사용하여 서버 측 업로드 처리를 수행한다.

DEXTUpload Pro의 자세한 기능이나 설명은 DEXTUpload Pro 제품 매뉴얼 및 샘플을 참고한다.

# 서버 측 설정이다.						
						
dim oDextpro, tempFolder, defaultFolder, idx, oFiles, oItem, sb

'임시 파일이 생성될 경로
tempFolder = Request.ServerVariables("APPL_PHYSICAL_PATH") & "files\temp"
'저장하고자 하는 대상 경로
defaultFolder = Request.ServerVariables("APPL_PHYSICAL_PATH") & "files\store"

'DEXTUpload Pro FileUpload 객체 생성
set oDextpro = server.CreateObject("DEXT.FileUpload")
oDextpro.AutoMakeFolder = TRUE
oDextpro.DefaultPath = tempFolder
oDextpro.CodePage = UTF8_CODEPAGE

'응답 데이터를 설정할 문자열 변수
sb = ""
'파일 콜렉션을 얻는다.
set oFiles = oDextpro("DEXTUploadX5_FileData")

for idx = 1 to oFiles.Count
  set oItem = oFiles(idx)
  oItem.Save(defaultFolder)
  sb = sb & "F:" & oItem.FileName & vbCrLf
  set oItem = nothing
next

set oFiles = nothing
set oDextpro = nothing

Response.ContentType = CONTENT_TYPE_TEXTPLAIN
Response.CharSet = UTF8_CHARSET
Response.Clear()
Response.Write(sb)

DEXTUploadX5는 브라우저가 아니다. 그러므로 서버와 DEXTUploadX5 간의 통신은 응답 데이터를 통해서만 주고받을 수 있다.

DEXTuploadX5는 응답 데이터가 HTTP 상태코드가 오류인 경우만, onDX5Error 콜백 함수를 호출하며, 나머지 경우는 모두 성공이라고 판단한다.

업로드가 성공적으로 완료가 되면 onDX5UploadCompleted 콜백 함수가 호출된다.

function onDX5UploadCompleted(id) {
  // 업로드가 완료되면 호출된다.
}

예제

파일을 추가한 후 업로드 버튼을 클릭하면 파일이 업로드된다.

파일 추가 업로드