jsUpload 구현한 사이트 입니다.

ASP로 작업해 달라고 해서 공개 게시판인 fsBoard를 사용하였습니다.

Naver SmartEditor + jQueryUpload

<%

If useFile=True And  uploadComponent="jQueryUpload" Then

If fileMaxLimit<0 Then strFileMaxLimit="Unlimited" Else strFileMaxLimit=Int(FormatNumber(fileMaxLimit/1048576,0)) & MsgExtract("WrLabelAttachFileLimit") End If

%>

<!-- 파일 업로드 -->

<input type="hidden" id="jsupload_count" name="jsupload_count">

<style type="text/css">

.fileupload_wrap{width:100%;margin:0;padding:10px 0;border-bottom:1px solid #ddd;}

.preview{width:20px; overflow:hidden; }

.name { width:230px; overflow:hidden; font-size:0.8em; padding-left:5px; }

.size { width:80px; text-align:right; overflow:hidden; font-size:0.8em; padding-right:5px; }

.fileList { width:100%; height:120px; margin-left:30px;margin:0;padding:0;border:1px solid #a0a0a0; overflow:scroll; }

.fileupload-buttonbar {width:96%; }

.table { width:100%; }

.table .delete { width:70px; text-align:left; overflow:hidden; font-size:1em; }

.table .cancel { width:70px; text-align:left; overflow:hidden; font-size:1em; }

.files .progress { width:180px; height:10px; }

.files .start { width:40px; }

.paste { padding-left:170px; }

/* 파일 업로드 프로그래스 바 */

.fileupload-progress .progress { height:5px; margin:0; padding:0; }

.fileupload-progress .progress .bar { height:5px; margin:0; padding:0; }

.fileupload-progress .progress-extended { height:20px; font-size:0.8em; padding: 5 0 5 0; margin:0; }

.btn { padding:0;margin:00; font-size:11px; width:85px; text-decoration: none; position: relative; cursor: pointer; }

.btn span {margin:0;color:#fff;}

.btn span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top:-8px;}

.btn-icon {margin: 2px; position: relative; padding: 4px 0 4px 0; cursor: pointer; float: left; list-style: none; width:33px; }

.btn-mini { margin:0; position: relative; padding: 0px 0; cursor: pointer; float: left; list-style: none;  width:90px; text-align:center; }

.btn-mini span {  margin:0; color:white; font-size:9px; }

.btn-mini span.ui-icon { margin:0; position: absolute; left: .2em; top: 50%; margin-top: -8px; }

</style>

<div style="width:100%;">

<div class="fileupload_wrap"><!-- bootstrap.min.css 35 line .container width 수정 (init 940px) -->

<form id="fileupload" action="" method="POST" enctype="multipart/form-data">

<noscript><input type="hidden" name="redirect" value=""></noscript>

<div class="row fileupload-buttonbar">

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>

<td width="90" class="le">

<span class="btn fileinput-button">

<i class="icon-plus icon-white"></i>

<span>파일추가</span>

<input type="file" name="files[]" multiple>

</span>

</td>

<td width="90" class="le" style="display:none;">

<button type="submit" class="btn btn-primary start">

<i class="icon-upload icon-white"></i>

<span>전송시작</span>

</button>

</td>

<td width="90" class="le" style="display:none;">

<button type="reset" class="btn btn-warning cancel">

<i class="icon-ban-circle icon-white"></i>

<span>전송취소</span>

</button>

</td>

<td width="120" class="le">

<button type="button" class="btn btn-danger delete">

<i class="icon-trash icon-white"></i>

<span>삭제</span>

</button>

<input type="checkbox" class="toggle margin-left-10">

</td>

<td><%=strFileMaxLimit%></td>

</tr>

</table>

<div class="span5 fileupload-progress fade">

<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">

<div class="bar" style="width:0%;"></div>

</div>

<div class="progress-extended">&nbsp;</div>

</div>

</div>

<div class="fileupload-loading"></div>

<div class="fileList">

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

</div>

</form>

<!-- The template to display files available for upload -->

<script id="template-upload" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

<tr class="template-upload fade">

 <td class="preview"><span class="fade"></span></td>

 <td class="name"><span>{%=decodeURIComponent(file.name)%}</span></td>

 <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

 {% if (file.error) { %}

<td class="error" colspan="2" style="color:red;"><span class="label label-important">&nbsp;Error : </span> {%=decodeURIComponent(file.error)%}</td>

 {% } else if (o.files.valid && !i) { %}

<td class="start">{% if (!o.options.autoUpload) { %}

<button class="btn-icon btn-primary" title="전송">

 <i class="icon-upload icon-white"></i>

 <!--<span>전송</span>-->

</button>

</td>

<td>

<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>

{% } %}</td>

 {% } else { %}

<td colspan="2">&nbsp;</td>

 {% } %}

 <td class="cancel">{% if (!i) { %}

<button class="btn-icon btn-warning" title="취소">

<i class="icon-ban-circle icon-white"></i>

<!--<span>취소</span>-->

</button>

 {% } %}</td>

</tr>

{% } %}

</script>

<!-- The template to display files available for download -->

<script id="template-download" type="text/x-tmpl">

{%

if($("#jsupload_count").val()=="") $("#jsupload_count").val(0);

for (var i=0, file; file=o.files[i]; i++) {

//if($("#jsupload_count").val()=="")

//{

var obj1 = document.createElement("input");

obj1.type="text";

obj1.name="attachFile"+($("#jsupload_count").val()*1+i);

obj1.id="attachFile"+($("#jsupload_count").val()*1+i);

obj1.className="jsuploaded_file";

obj1.value=decodeURIComponent(file.name);

$(obj1).appendTo("#jsupload_files");

var obj2 = document.createElement("input");

obj2.type="text";

obj2.name="attachSize"+($("#jsupload_count").val()*1+i);

obj2.id="attachSize"+($("#jsupload_count").val()*1+i);

obj2.className="jsuploaded_size";

obj2.value=file.size;

$(obj2).appendTo("#jsupload_files");

//}

%}

<tr class="template-download fade">

 {% if (file.error) { %}

<td></td>

<td class="name"><span>{%=file.name%}</span></td>

<!--<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>-->

<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>

 {% } else { %}

<td class="preview">{% if (file.thumbnail_url) { %}

<span><a href="{%=decodeURIComponent(file.url)%}" title="{%=decodeURIComponent(file.name)%}" target="_new"><img src="{%=decodeURIComponent(file.thumbnail_url)%}"></a></span>

{% } %}</td>

<td class="name">

<span><a href="{%=decodeURIComponent(file.url)%}" title="{%=decodeURIComponent(file.name)%}" data-gallery="{%=decodeURIComponent(file.thumbnail_url)&&'gallery'%}" download="{%=decodeURIComponent(file.name)%}">{%=decodeURIComponent(file.name)%}</a></span>

</td>

<td class="size"><span>{%=o.formatFileSize(file.size)%}</span>&nbsp;</td>

<td class="paste" colspan="2">

<button class="btn-mini btn-success btn_paste" tag="{%=decodeURIComponent(file.url)%}" alt="{%=decodeURIComponent(file.name)%}" title="본문삽입">

<i class="icon-circle-arrow-up icon-white"></i>

<span>본문삽입</span>

</button></right>

</td>

{% } %}

<td class="delete">

<button class="btn-icon btn-danger" tag="{%=file.name%}" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %} title="삭제">

<i class="icon-trash icon-white"></i>

<!--<span>삭제</span>-->

</button>

<input type="checkbox" name="delete" value="1">

</td>

</tr>

{% }

$("#jsupload_count").val($("#jsupload_count").val()*1+o.files.length);

%}

</script>

</script>

<script src="<%=FSBOARD_PATH%>jsupload/addon/tmpl.min.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/addon/load-image.min.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/addon/canvas-to-blob.min.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/addon/jquery.image-gallery.min.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/jquery.iframe-transport.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/jquery.fileupload.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/jquery.fileupload-fp.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/jquery.fileupload-ui.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/jquery.fileupload-jui.js"></script>

<script src="<%=FSBOARD_PATH%>jsupload/js/main.js"></script>

<!--[if gte IE 8]><script src="<%=FSBOARD_PATH%>jsupload/js/cors/jquery.xdr-transport.js"></script><![endif]-->

</div>

<%End If%>

게시글 저장시 서버에서 처리하는 방법

'// jQuery 업로드일 경우
If uploadComponent="jQueryUpload" Then
If RequestForm("attachFile0") <> "" Then
tmp = CreateServerFolder(directoryPath & "\" & CInt(seqNum / 100)) ' 게시판 번호 분류 폴더 1/100
If tmp=False Then
Response.Redirect "?id=" & id & "&mode=error&msg=" & Server.UrlEncode(MsgExtract("UploadFolderError")) '"업로드폴더 생성에 실패했습니다."
Response.End
End If
tmp = CreateServerFolder(directoryPath & "\" & CInt(seqNum / 100) & "\" & seqNum) ' 게시판 번호 분류 폴더 1/100
If tmp=False Then
Response.Redirect "?id=" & id & "&mode=error&msg=" & Server.UrlEncode(MsgExtract("UploadFolderError")) '"업로드폴더 생성에 실패했습니다."
Response.End
End If
End If

upUrl = Replace(Replace(directoryPath, Server.MapPath(pathAdjust)&"\.\", ""),"\","/")

For i=0 To (fileMaxNum-1) Step 1
' WriteToFile LogFile, "첨부파일 " & i & " : " & RequestForm("attachFile"&i) & vbCrLf, True
If RequestForm("attachFile"&i) <> "" Then
fileName(i) = SanitizeFileName(RequestForm("attachFile"&i)) '//파일명에 부적합한 문자 제거
fileSize(i) = Replace(RequestForm("attachSize"&i), "'", "")

' 임시저장 폴더로부터 실제 저장폴더로 복사, 임시파일삭제
CopyFile Server.MapPath(pathAdjust&"\jsupload\files")&"\"&RequestForm("unique_key")&"\"&RequestForm("attachFile"&i), directoryPath&"\"&CInt(seqNum / 100)&"\"&seqNum&"\"&fileName(i)  , "delete"

' 섬네일이 있는 경우 임시저장 폴더로부터 실제 저장폴더로 복사, 임시파일삭제
CopyFile Server.MapPath(pathAdjust&"\jsupload\files")&"\"&RequestForm("unique_key")&"\thumb_"&RequestForm("attachFile"&i), directoryPath&"\"&CInt(seqNum / 100)&"\"&seqNum&"\thumb_"&fileName(i) , "delete"

' 에디터 본문에 삽입된 경우 경로 재설정
contents = Replace(contents, "jsupload/files/"&RequestForm("unique_key")&"/"&RequestForm("attachFile"&i), upurl&"/"&CInt(seqNum / 100)&"/"&seqNum&"/"&fileName(i))

' 섬네일이 에디터 본문에 삽입된 경우 경로 재설정
contents = Replace(contents, "jsupload/files/"&RequestForm("unique_key")&"/thumb_"&RequestForm("attachFile"&i), upurl&"/"&CInt(seqNum / 100)&"/"&seqNum&"/thunb_"&fileName(i))
End If
Next

' 임시 업로드 폴더 제거
On Error Resume Next
set objFSO = CreateObject("Scripting.FileSystemObject")
If  objFSO.FolderExists(Server.MapPath("jsupload\files")&"\"&RequestForm("unique_key")) Then
objFSO.DeleteFolder(Server.MapPath("jsupload\files")&"\"&RequestForm("unique_key"))
End If
Set objFSO = Nothing
Err.Clear