input[type=file] 을 이용한 파일선택 창을 통한 파일첨부 방법 이외에도
jquery를 사용하여 드래그 만으로 파일첨부가 가능하다.
이에 관련한 기능 설명 및 내용은 소스코드로 첨부한다.
<!DOCTYPE>
<HTML>
<BODY>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 파일 리스트 번호
var fileIndex = 0;
// 등록할 전체 파일 사이즈
var totalFileSize = 0;
// 파일 리스트
var fileList = new Array();
// 파일 사이즈 리스트
var fileSizeList = new Array();
// 등록 가능한 파일 사이즈 MB
var uploadSize = 50;
// 등록 가능한 총 파일 사이즈 MB
var maxUploadSize = 500;
$(function (){
// 파일 드롭 다운
fileDropDown();
});
// 파일 드롭 다운
function fileDropDown(){
var dropZone = $("#dropZone");
//Drag기능
dropZone.on('dragenter',function(e){
e.stopPropagation();
e.preventDefault();
// 드롭다운 영역 css
dropZone.css('background-color','#E3F2FC');
});
dropZone.on('dragleave',function(e){
e.stopPropagation();
e.preventDefault();
// 드롭다운 영역 css
dropZone.css('background-color','#FFFFFF');
});
dropZone.on('dragover',function(e){
e.stopPropagation();
e.preventDefault();
// 드롭다운 영역 css
dropZone.css('background-color','#E3F2FC');
});
dropZone.on('drop',function(e){
e.preventDefault();
// 드롭다운 영역 css
dropZone.css('background-color','#FFFFFF');
var files = e.originalEvent.dataTransfer.files;
if(files != null){
if(files.length < 1){
alert("폴더 업로드 불가");
return;
}
selectFile(files)
}else{
alert("ERROR");
}
});
}
// 파일 선택시
function selectFile(fileObject){
var files = null;
if(fileObject != null){
// 파일 Drag 이용하여 등록시
files = fileObject;
}else{
// 직접 파일 등록시
files = $('#multipaartFileList_' + fileIndex)[0].files;
}
// 다중파일 등록
if(files != null){
for(var i = 0; i < files.length; i++){
// 파일 이름
var fileName = files[i].name;
var fileNameArr = fileName.split("\.");
// 확장자
var ext = fileNameArr[fileNameArr.length - 1];
// 파일 사이즈(단위 :MB)
var fileSize = files[i].size / 1024 / 1024;
if($.inArray(ext, ['exe', 'bat', 'sh', 'java', 'jsp', 'html', 'js', 'css', 'xml']) >= 0){
// 확장자 체크
alert("등록 불가 확장자");
break;
}else if(fileSize > uploadSize){
// 파일 사이즈 체크
alert("용량 초과\n업로드 가능 용량 : " + uploadSize + " MB");
break;
}else{
// 전체 파일 사이즈
totalFileSize += fileSize;
// 파일 배열에 넣기
fileList[fileIndex] = files[i];
// 파일 사이즈 배열에 넣기
fileSizeList[fileIndex] = fileSize;
// 업로드 파일 목록 생성
addFileList(fileIndex, fileName, fileSize);
// 파일 번호 증가
fileIndex++;
}
}
}else{
alert("ERROR");
}
}
// 업로드 파일 목록 생성
function addFileList(fIndex, fileName, fileSize){
var html = "";
html += "<tr id='fileTr_" + fIndex + "'>";
html += " <td class='left' >";
html += fileName + " / " + fileSize + "MB " + "<a href='#' onclick='deleteFile(" + fIndex + "); return false;' class='btn small bg_02'>삭제</a>"
html += " </td>"
html += "</tr>"
$('#fileTableTbody').append(html);
}
// 업로드 파일 삭제
function deleteFile(fIndex){
// 전체 파일 사이즈 수정
totalFileSize -= fileSizeList[fIndex];
// 파일 배열에서 삭제
delete fileList[fIndex];
// 파일 사이즈 배열 삭제
delete fileSizeList[fIndex];
// 업로드 파일 테이블 목록에서 삭제
$("#fileTr_" + fIndex).remove();
}
// 파일 등록
function uploadFile(){
// 등록할 파일 리스트
var uploadFileList = Object.keys(fileList);
// 파일이 있는지 체크
if(uploadFileList.length == 0){
// 파일등록 경고창
alert("파일이 없습니다.");
return;
}
// 용량을 500MB를 넘을 경우 업로드 불가
if(totalFileSize > maxUploadSize){
// 파일 사이즈 초과 경고창
alert("총 용량 초과\n총 업로드 가능 용량 : " + maxUploadSize + " MB");
return;
}
if(confirm("등록 하시겠습니까?")){
// 등록할 파일 리스트를 formData로 데이터 입력
var form = $('#uploadForm');
var formData = new FormData(form);
for(var i = 0; i < uploadFileList.length; i++){
formData.append('files', fileList[uploadFileList[i]]);
}
$.ajax({
url:"업로드 경로",
data:formData,
type:'POST',
enctype:'multipart/form-data',
processData:false,
contentType:false,
dataType:'json',
cache:false,
success:function(result){
if(result.data.length > 0){
alert("성공");
location.reload();
}else{
alert("실패");
location.reload();
}
}
});
}
}
</script>
<form name="uploadForm" id="uploadForm" enctype="multipart/form-data" method="post">
<table class="table" width="100%" border="1px">
<tbody id="fileTableTbody">
<tr>
<td id="dropZone">
파일을 드래그 하세요
</td>
</tr>
</tbody>
</table>
</form>
<a href="#" onclick="uploadFile(); return false;" class="btn bg_01">파일 업로드</a>
</BODY>
</HTML>
출처: http://cofs.tistory.com/364 [CofS]
'Development > Javascript, jQuery' 카테고리의 다른 글
| input text 정규식을 이용하여 숫자만 입력하게 하기 (0) | 2020.11.04 |
|---|---|
| [javascript] Excel 파일 (xls, xlsx) 데이터 파싱하기 (0) | 2018.07.05 |
| 익스플로러 referrer 체크 이슈 (0) | 2018.04.19 |
| [javascript] 다음 도로명,주소 postcode api 사용하기 (0) | 2018.02.09 |
| [jQuery] cycle 이용한 간단한 롤링 (0) | 2018.01.19 |
