업로드 방식에는 autoUpload 속성에 따라 아래와 같이 나눌 수 있습니다.
autoUpload Value | Descripttion |
---|---|
true (자동업로드) |
add 메소드의 호출시 보여지는 파일선택창에서 사용자가 파일을 선택하는 즉시 서버로 전송 |
false (수동업로드) |
add 메소드의 호출로 사용자가 선택한 파일은 실제 서버로 전송되지 않고 관리되다가, upload 메소드를 호출하는 순간에서야 서버로 전송 |
링크 버튼을 제공
하고 링크 버튼을 사용자가 클릭했을 때 add메소드를 호출하도록 구현합니다.<head>
<script>
// autoUpload : true 모드
$(function(){
//업로드 객체 초기화
$("#myUpload").IBUpload({
viewType:"icon",
iconMode :"detail",
autoUpload:true //즉시업로드
});
});
function doAction(sAction) {
switch (sAction) {
case 'add':
$('#myUpload').IBUpload('add');
break;
}
}
</script>
</head>
<body>
<a href="javascript:doAction('add');">파일첨부</a>
<hr>
<!-- 업로드 상위 객체의 크기를 따른다 -->
<div style="width:750px;height:400px">
<div id="myUpload"></div>
</div>
</body>
<head>
<script>
// autoUpload : false 모드 (업로드 버튼 클릭시 서버 전송)
$(function(){
$("#myUpload").IBUpload({
viewType:"icon",
iconMode :"detail",
autoUpload:false //수동 업로드
});
});
function doAction(sAction) {
switch (sAction) {
case 'add'://파일 선택
$('#myUpload').IBUpload('add');
break;
case 'upload'://서버 전송
$('#myUpload').IBUpload(upload);
break;
}
}
</script>
</head>
<body>
<a href="javascript:doAction('add');">파일추가</a>
<a href="javascript:doAction('upload');">업로드</a>
</body>
extendParamUpload
메소드를 통해 파일 외 다양한 문자열 값들을 함께 전송할 수 있습니다.extendParamUpload
메소드를 미리 호출하고 upload 메소드를 호출하는 순간, 서버 파트에서 해당 파라메터들의 name 과 value 를 함께 얻어볼 수 있습니다.function doAction(sAction) {
switch (sAction) {
case 'add':
$('#myUpload').IBUpload('add');
break;
case 'upload':
$('#myUpload').IBUpload("extendParamUpload","userid=user-id10012&content=올해의 신청자료");
$('#myUpload').IBUpload('upload');
break;
}
}
onUploadData
이벤트에서 받을 수 있습니다.
저장 결과 json안에 업로드가 필요로 하는 결과 내용 외에 클라이언트 단에 전송하고자 하는 내용이 있으면 별도로 추가할 수 있습니다.{ "ibupload": //전송한 파일에 대한 정보
[{"size":32927, "id":"myUpFile0_0_0","url":"myUploadedFiles\/20180823162727"}
.....
]
,"etcdata": //서버측에서 임의의로 만들어진 데이터
{ "name" : "실험 데이타" ,
"content" : "실험 데이타입니다." ,
"content2" : "실험 데이타2입니다."
}
}
ibupload
속성을 통해 업로드가 필요로 하는 정보 외에 etcdata 라는 임의의 내용을 추가하여 전송할 수 있습니다. onUploadData
$(function(){
$("#myUpload").IBUpload({
viewType:"icon",
iconMode :"icon",
theme :"Main",
onUploadData: function(serverObject, serverText){
frm.sa_name.value = serverObject.etcdata.name;
frm.sa_contents.value = serverObject.etcdata.content;
return serverObject; //반드시 리턴값이 있어야 합니다.
}
});
});