예를들어, GIF, JPG, PNG 파일만 업로드를 허용하고자 할 경우에 allowType 값을 "gif,jpg,png"로 입력하면 해당 확장자만 업로드가 됩니다.

기본적으로 이 값을 비워두거나, 정의하지 않으면 모든 확장자의 업로드를 허용합니다.

autoLoad 값이 true 일 경우, AzUploader 클래스에 정의된 loadURL 과 onLoad 이벤트에 따라, 서버에 업로드된 파일목록을 에이지업로드가 출력되는 순간 로딩합니다.

new AzUploader({
	id:"example",
	autoLoad:true,
	loadURL:"./test.xml?param1=value",
	// 이하생략
});

autoLoad 값이 false 일 경우 별도의 load() 함수를 이용하여 기존에 업로드된 파일목록을 로딩할 수 있습니다.

해당함수에 대한 자세한 설명은 Method부분의 load()함수를 참고하여 주시기 바랍니다.

autoRender의 값이 false 일 경우, 별도의 출력함수를 호출하여 페이지에 에이지업로더를 출력한다.

var test = new AzUploader({
	id:"example",
	autoRender:false
});
// 화면 출력을 원하는 곳에서
AzUplaoderComponent.get("example").render();
// 또는 var test 변수를 사용하여
test.render();

render() 함수에 대한 자세한 설명은 Method부분의 render()함수를 참고하여 주시기 바랍니다.

new AzUploader({
	id:"example",
	formElement:"writePost",
	listeners:{
		onUpload:function(file) {
			document.forms[this.formElement]["fileIdx"].value = file.server;
		}
	}
	// 이하 생략
});

이 값을 이용하여, AzUploaderComponent.get("id값") 으로 특정 에이지업로더에 접근할 수 있습니다.

AzUploaderComponent 에 대한 자세한 설명은 공용API를 참고하여 주시기 바랍니다.

이벤트핸들러 종류는 이벤트부분을 참고하여 주시기 바랍니다.

new AzUploader({
	// 생략
	listeners:{
		onReady:function() {},
		onLoad:function() {},
		// 생략
	}
})

이벤트부분을 참고하여 이벤트이름을 KEY로 하는 이벤트함수를 등록합니다.

파일하나당 용량제한을 10MByte로 하고자 할때 maxFileSize 변수값을 10 으로 등록합니다.

0을 입력하거나, 해당 변수를 정의하지 않으면 기본적으로 파일하나당 용량제한을 하지 않습니다.

여러개의 파일을 동시에 업로드할때, 총 업로드 가능 용량을 제한합니다.

총 업로드용량을 100MByte로 제한하고자 할때 maxTotalSize 값을 100 으로 입력합니다.

0을 입력하거나, 해당 변수를 정의하지 않으면 기본적으로 용량제한을 하지 않습니다.

이전에 업로드했었던 파일을 로딩할 경우, 이전에 업로드했던 파일들의 용량도 합산하여 처리됩니다.

new AzUploader({
	id:"example",
	moduleDir:"./board",
	listeners:{
		onComplete:function() {
			document.getElementById("test").innerHTML = this.moduleDir+"delete.gif";
		}
	}
	// 이하 생략
});

new AzUploader({
	id:"example",
	moduleType:"board",
	listeners:{
		onComplete:function() {
			if (this.moduleType == "board") {
				// moduleType 이 board 일때 특정역할 수행
			}
		}
	}
	// 이하 생략
});

에이지업로더가 출력될 영역의 ID값을 지정합니다. 이 값이 지정되어 있지 않은 경우 AzUploader객체가 정의된 곳에 에이지업로더가 출력됩니다.

<div id="renderArea"></div>

new AzUploader({
	renderElement:"renderArea",
	// 이하생략
})

위와 같이 정의할 경우 id값이 renderArea 인 엘리먼트에 에이지업로더가 출력됩니다.

new AzUploader({
	id:"example",
	skinDir:"./board",
	listeners:{
		onComplete:function() {
			document.getElementById("test").innerHTML = this.skinDir+"delete.gif";
		}
	}
	// 이하 생략
});

파일업로드를 처리할 파일주소를 지정합니다. (일반적으로 PHP, JSP, ASP파일의 경로)

파일업로드는 HTTP1.1 의 FORM에서 전송되어지는 파일과 동일하게 취급되며, 변수명은 Filedata로 전달됩니다.

업로드를 처리할 파일이 PHP일 경우, 아래와 같은 코드로 파일업로드를 처리할 수 있습니다.

<?php
$file = $_FILES['Filedata']; // HTTP의 POST방식으로 전달되는 것과 동일
$filename = $file['name'];
// 디비처리 등 필요한 요소가 있다면 추가
@move_uploaded_file($file['tmp_name'],'파일이 이동될 경로');
// 업로드가 완료되었을 때, 에이지업로드에 알려줄 메세지
echo 'SERVER RETURN'; // 일반적으로 파일의 서버위치나 DB고유값 등)
?>

new AzUploader({
	id:"example",
	wysiwygElement:"wysiwyg",
	listeners:{
		onUpload:function(file) {
			document.getElementById[this.wysiwygElement].contentWindow.body.innerHTML+= "<img src='"+file.server+"' />";
		}
	}
	// 이하 생략
});

autoLoad 값이 true 일 경우, 에이지업로더가 정의되는 순간 로딩하며, autoLoad 값이 false 인 경우에만 해당 함수를 이용하여 서버에 업로드 된 파일을 로딩할 수 있습니다.

onSelect 이벤트발생시 file Object 에 포함된 idx 값을 이용하여 해당 대기파일을 삭제합니다.

파일삭제가 성공하면, onDelete 이벤트가 발생하며, 해당 이벤트의 인자로 삭제된 파일에 대한 정보가 전달됩니다.

render() 를 호출하는 구문이 있는 위치에 에이지업로더를 출력합니다.

render("특정ID") 특정 ID 의 객체부분에 에이지업로더를 출력합니다.

<div id="azuploader"></div>

var test = new AzUploader({
	id:"example",
	autoRender:false,
	// 생략
});

test.render(); // 현재 라인에 에이지업로더를 출력
test.render("azuploader"); ID값이 azuploader 인 곳에 에이지업로더를 출력
// 또는 공용함수인 AzUploaderComponent와 AzUploader 의 ID값을 이용하여
AzUploaderComponent.get("example").render();

type 부분에 업로드를 허용할 확장자를 콤마(,)로 구분하여 입력합니다.

예를 들어 GIF, JPG, PNG 파일만 허용할 경우 setAllowType("gif,jpg,png"); 로 호출하면 해당 확장자만 업로드 됩니다.

loadURL 값이 "./load.php" 이고, 해당 함수를 아래와 같이 호출했다면,

setLoadURLParams("idx=1");

load() 함수를 이용하여, 기존에 업로드된 파일을 로딩하면, ./load.php?idx=1 주소에서 기존에 업로드된 파일을 불러오게 됩니다.

autoLoad 값이 true 일 경우에는 적용되지 않습니다.

maxSize 변수는 MByte 를 의미합니다.

예를들어 파일의 업로드 최대용량을 10MByte로 제한하고자 한다면, setMaxFileSize(10); 을 호출합니다.

maxSize 변수는 MByte 를 의미합니다.

예를들어 파일의 업로드 최대용량을 10MByte로 제한하고자 한다면, setMaxFileSize(10); 을 호출합니다.

var test = new AzUploader({
	id:"example",
	// 생략
});

test.upload();
// 또는 AzUploaderComponent 와 AzUploader 의 ID값을 이용하여,
AzUploaderComponent.get("example").upload();

AzUploader 가 GLOBAL이 아니라, 특정 클래스나 함수내에서 AzUploader 에 접근하지 못할때, 해당 함수를 호출하면, 특정 ID로 정의된 AzUploader 를 불러올 수 있습니다.

new AzUploader({
	id:"example",
	// 생략
});

function localFunction() {
	var AzUploader = AzUploaderComponent.get("example");
	AzUploader.upload(); // AzUploader 객체의 모든 Property, Method 를 호출할 수 있습니다.
}

현재 페이지에 정의된 모든 AzUploader 객체의 setLoadParams 함수와, load 함수를 호출하여, 현재 페이지의 모든 AzUploader에서 기존 업로드된 파일을 로딩합니다.

params 매개변수는 생략가능하며, 정의되어 있을 경우 각각의 AzUploader 의 loadURL에 파라매터를 설정합니다.

new AzUploader({
	id:"example1",
	loadURL:"./load.php?p=1",
	// 생략
});

new AzUploader({
	id:"example2",
	loadURL:"./load.php?p=2",
});

AzUploaderCompoent.load("p2=value");
/*
example1로 정의된 AzUploader 에서는 "./load.php?p=1&p2=value" 주소에서
example2로 정의된 AzUploader 에서는 "./load.php?p=2&p2=value" 주소에서
각각 기존업로드된 파일을 로딩합니다.
*/

AzUploader this - 이벤트가 발생한 업로더객체

new AzUploader({
	// 생략
	listeners:{
		onComplete:function(uploader) {
			alert(uploader.id+"업로더의 모든 업로드가 완료되었습니다.");
			for (var i=0, loop=uploader.errorFiles.length;i<loop;i++) {
				alert(uploader.errorFiles[i].name+"파일은 업로드 되지 못하였습니다.");
			}
		}
	}
});

Object[] errorFiles - 업로드에 실패한 파일의 객체가 배열로 기록됩니다.

errorFiles.idx:int - 에러가 발생한 파일의 고유 인덱스값

errorFiles.name:String - 에러가 발생한 파일의 이름

errorFiles.size:int - 에러가 발생한 파일의 크기 (byte)

errorFiles.msg:String - 에러가 발생한 이유

이미 업로드가 된 파일에 대해서는 해당 이벤트가 발생하지 않습니다. 업로드가 완료된 파일에 대해서는 별도의 삭제알고리즘을 구현하셔야 합니다.

AzUploader this - 이벤트가 발생한 업로더객체

Object file

file.idx:int - 삭제된 파일의 고유 인덱스값

file.name:String - 삭제된 파일의 이름

file.size:int - 삭제된 파일의 크기 (byte)

new AzUploader({
	// 생략
	listeners:{
		onDelete:function(uploader,file) {
			alert("업로드 대기큐에서 "+file.name+"파일이 삭제되었습니다. 해당 파일은 업로드 되지 않습니다.");
		}
	}
});

AzUploader this - 이벤트가 발생한 업로더객체

Object file

file.idx:int - 에러가 발생한 파일의 고유 인덱스값

file.name:String - 에러가 발생한 파일의 이름

file.size:int - 에러가 발생한 파일의 크기 (byte)

new AzUploader({
	// 생략
	listeners:{
		onError:function(file) {
			alert(file.name+"파일의 업로드가 실패하였습니다.");
		}
	}
});

참고 : 업로드가 실패한 파일의 경우 AzUploader 객체의 errorFiles 변수에 기록됩니다.

onComplete 이벤트에서 해당 변수값을 참고하여 에러가 발생한 파일들을 일괄적으로 표현할 수 있습니다. 이 부분은 onComplete 이벤트를 참고하여 주시기 바랍니다.

기존에 업로드 된 파일을 로딩한 뒤 해당 파일의 Object 를 배열로 전달합니다.

기존에 업로드 된 파일을 로딩하는 방법에 대해서는 Property부분의 loadURL 부분과 Method부분의 load() 함수를 참고하시기 바랍니다.

AzUploader this - 이벤트가 발생한 업로더객체

Object file

file.idx:int - 로딩된 파일의 고유한 인덱스값

file.name:String - 로딩된 파일의 이름

file.size:int - 로딩된 파일의 크기 (byte)

file.server:String - 해당 파일이 업로드될 당시의 서버에서 반환된 값

new AzUploader({
	// 생략
	loadURL:"./load.php",
	listeners:{
		onLoad:function(uploader,file) {
			for (var i=0, loop=file.length;i<loop;i++) {
				alert("기존에 업로드된 파일 "+file[i].name+"을 로딩하였습니다.");
			}
		}
	}
});

업로드가 진행중일 때 실시간으로 해당 이벤트가 발생합니다.

AzUploader this - 이벤트가 발생한 업로더객체

Object file

file.idx:int - 현재 업로드가 되고 있는 파일의 고유 인덱스값

file.name:String - 현재 업로드가 되고 있는 파일의 이름

file.size:int - 현재 업로드가 되고 있는 파일의 크기 (byte)

Object fileUpload

fileUpload.count:int - 현재 업로드가 되고 있는 파일의 순번

fileUpload.upload:int - 현재 업로드가 되고 있는 파일의 업로드 된 용량 (byte)

fileUpload.total:int - 현재 업로드가 되고 있는 파일의 총 용량 (byte)

참고 : fileUpload.upload / fileUpload.total * 100 의 수식으로 현재 업로드가 진행되고 있는 파일의 진행률(%)를 구할 수 있습니다.

Object totalUpload

totalUpload.count:int - 현재 업로드가 되고 있는 전체파일의 갯수

totalUpload.upload:int - 현재 업로드가 되고 있는 전체파일의 전체업로드 된 용량 (byte)

totalUpload.total:int - 현재 업로드가 되고 있는 전체파일의 총 용량 (byte)

참고 : totalUpload.upload / totalUpload.total * 100 의 수식으로 현재 업로드가 진행되고 있는 모든파일의 진행률(%)를 구할 수 있습니다.

Object time

time.file:int - 현재 업로드 되고 있는 파일의 진행시간 (초)

time.total:int - 현재 업로드가 되고 있는 전체파일에 대한 진행시간 (초)

time.remain:int - 현재 업로드가 되고 있는 전체파일에 대한 남은 예상시간 (초)

Object speed

speed.file:int - 현재 업로드 되고 있는 파일의 업로드속도 (Byte/초)

speed.total:int - 현재 업로드 되고 있는 전체파일에 대한 평균 업로드속도 (Byte/초)

각종 변수들을 활용하여 남은시간 및 업로드진행률(%)에 따른 프로그래스바 디자인 등은 직접 구현하셔야 합니다.

new AzUploader({
	// 생략
	listeners:{
		onProgress:function(uploader,file,fileUpload,totalUpload,time,speed) {
			// 프로그래스바 구현
		}
	}
});

AzUploader this - 이벤트가 발생한 업로더객체

new AzUploader({
	// 생략
	listeners:{
		onReady:function() {
			alert("업로드가 가능합니다.");
		}
	}
});

선택된 파일 Object 가 배열로 전달됩니다.

Object file

file.idx:int - 선택된 파일의 고유 인덱스값

file.name:String - 선택된 파일의 이름

file.size:int - 선택된 파일의 크기 (byte)

new AzUploader({
	// 생략
	listeners:{
		onSelect:function(file) {
			for (var i=0, loop=file.length;i<loop;i++) {
				alert("선택된 파일의 이름은 "+file[i].name+"입니다.");
			}
		}
	}
});

전체파일의 업로드가 완료되었을 때 발생하는 이벤트는 onComplete 입니다.

AzUploader this - 이벤트가 발생한 업로더객체

Object file

file.idx:int - 업로드가 완료된 파일의 고유 인덱스값

file.name:String - 업로드가 완료된 파일의 이름

file.size:int - 업로드가 완료된 파일의 크기 (byte)

file.server:String - 업로드완료후 서버에서 반환된 값 (uploadURL 변수에 정의된 서버사이드 스크립트파일에서 출력된 값이 이곳에 기록됩니다.)

new AzUploader({
	// 생략
	uploadURL:"./upload.php",
	listeners:{
		onUpload:function(uploader,file) {
			alert(file.name+"파일의 업로드가 완료되었으며, 서버에서 반환된 값은 "+file.server+"입니다.");
		}
	}
});