login register Sysop! about ME  

2023년 10월 19일 11시 48분 00초,     조회수 : 273
  제목 : ajax 파일 업로드시
SEQ : 164486 글쓴이 : pjunmo33

작성 포맷 : TEXT 모드, 자동 줄바꿈 사용

네이버 블로그 참조하여 아래와 같이 소스 실행하여 보았는데요

http://nausicaa.gabia.io/test2/t1.asp 

279라인의 0330_1upload.asp 소스가 전혀 먹지가 않습니다. 에러도 안나구요

어디가 잘못되었는지 확인 가능할까요?

0330_1upload.asp 소스도 하단에 올려 두었습니다.


<!DOCTYPE>
<html>
<%
    Response.Expires = -1
    Session.codepage = 65001
    Response.CharSet = "utf-8" 
    Response.AddHeader "Pragma", "No-Cache"
    Response.CacheControl = "Private"
%>
    <head>
    <style>
        .upload-btn-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        
        .upload-btn {
            border: 2px solid gray;
            color: gray;
            background-color: white;
            padding: 8px 20px;
            border-radius: 8px;
            font-size: 20px;
            font-weight: bold;
        }
        
        .upload-btn-wrapper input[type=file] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        
        #fileDragDesc {
            width: 100%; 
            height: 100%; 
            margin-left: auto; 
            margin-right: auto; 
            padding: 5px; 
            text-align: center; 
            line-height: 300px; 
            vertical-align:middle;
        }
    </style>
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $("#input_file").bind('change', function() {
                    selectFile(this.files);
                    //this.files[0].size gets the size of your file.
                    //alert(this.files[0].size);
                });
            });
        
            // 파일 리스트 번호
            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("폴더 업로드 불가"); */
                            console.log("폴더 업로드 불가");
                            return;
                        } else {
                            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) {
                    
                    if (files != null && files.length > 0) {
                        $("#fileDragDesc").hide(); 
                        $("fileListTable").show();
                    } else {
                        $("#fileDragDesc").show(); 
                        $("fileListTable").hide();
                    }
                    
                    for (var i = 0; i < files.length; i++) {
                        // 파일 이름
                        var fileName = files[i].name;
                        var fileNameArr = fileName.split("\.");
                        // 확장자
                        var ext = fileNameArr[fileNameArr.length - 1];
                        
                        var fileSize = files[i].size; // 파일 사이즈(단위 :byte)
                        console.log("fileSize="+fileSize);
                        if (fileSize <= 0) {
                            console.log("0kb file return");
                            return;
                        }
                        
                        var fileSizeKb = fileSize / 1024; // 파일 사이즈(단위 :kb)
                        var fileSizeMb = fileSizeKb / 1024;    // 파일 사이즈(단위 :Mb)
                        
                        var fileSizeStr = "";
                        if ((1024*1024) <= fileSize) {    // 파일 용량이 1메가 이상인 경우 
                            console.log("fileSizeMb="+fileSizeMb.toFixed(2));
                            fileSizeStr = fileSizeMb.toFixed(2) + " Mb";
                        } else if ((1024) <= fileSize) {
                            console.log("fileSizeKb="+parseInt(fileSizeKb));
                            fileSizeStr = parseInt(fileSizeKb) + " kb";
                        } else {
                            console.log("fileSize="+parseInt(fileSize));
                            fileSizeStr = parseInt(fileSize) + " byte";
                        }
    
                        /* if ($.inArray(ext, [ 'exe', 'bat', 'sh', 'java', 'jsp', 'html', 'js', 'css', 'xml' ]) >= 0) {
                            // 확장자 체크
                            alert("등록 불가 확장자");
                            break; */
                        if ($.inArray(ext, [ 'hwp', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'png', 'pdf', 'jpg', 'jpeg', 'gif', 
'zip' ]) <= 0) {
                            // 확장자 체크
                            /* alert("등록이 불가능한 파일 입니다.");
                            break; */
                            alert("등록이 불가능한 파일 입니다.("+fileName+")");
                        } else if (fileSizeMb > uploadSize) {
                            // 파일 사이즈 체크
                            alert("용량 초과\n업로드 가능 용량 : " + uploadSize + " MB");
                            break;
                        } else {
                            // 전체 파일 사이즈
                            totalFileSize += fileSizeMb;
    
                            // 파일 배열에 넣기
                            fileList[fileIndex] = files[i];
    
                            // 파일 사이즈 배열에 넣기
                            fileSizeList[fileIndex] = fileSizeMb;
    
                            // 업로드 파일 목록 생성
                            addFileList(fileIndex, fileName, fileSizeStr);
    
                            // 파일 번호 증가
                            fileIndex++;
                        }
                    }
                } else {
                    alert("ERROR");
                }
            }
    
            // 업로드 파일 목록 생성
            function addFileList(fIndex, fileName, fileSizeStr) {
                /* if (fileSize.match("^0")) {
                    alert("start 0");
                } */
    
                var html = "";
                html += "<tr id='fileTr_" + fIndex + "'>";
                html += "    <td id='dropZone' class='left' >";
                html += fileName + " (" + fileSizeStr +") " 
                        //+ "<a href='#' onclick='deleteFile(" + fIndex + "); return false;' class='btn small bg_02'> 삭제
</a>"
                        
                        + "<input value='삭제' type='button' href='#' onclick='deleteFile(" + fIndex + "); return false;'>"
                html += "    </td>"
                html += "</tr>"
    
                $('#fileTableTbody').append(html);
            }
    
            // 업로드 파일 삭제
            function deleteFile(fIndex) {
                console.log("deleteFile.fIndex=" + fIndex);
                // 전체 파일 사이즈 수정
                totalFileSize -= fileSizeList[fIndex];
    
                // 파일 배열에서 삭제
                delete fileList[fIndex];
    
                // 파일 사이즈 배열 삭제
                delete fileSizeList[fIndex];
    
                // 업로드 파일 테이블 목록에서 삭제
                $("#fileTr_" + fIndex).remove();
                
                console.log("totalFileSize="+totalFileSize);
                
                if (totalFileSize > 0) {
                    $("#fileDragDesc").hide(); 
                    $("fileListTable").show();
                } else {
                    $("#fileDragDesc").show(); 
                    $("fileListTable").hide();
                }
            }
    
            // 파일 등록
            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 : "0330_1upload.asp",
                        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>
    </head>
    <body>
        
        <div class="upload-btn-wrapper">
            <input type="file" id="input_file" multiple="multiple" style="height: 100%;" />
            <button class="upload-btn">파일선택</button>
        </div>
        <br />
    
        <form name="uploadForm" id="uploadForm" enctype="multipart/form-data" method="post">
    
            <div id="dropZone" style="width: 500px; height: 300px; border-style: solid; border- ;">
                <div id="fileDragDesc"> 파일을 드래그 해주세요. </div>
            
                
                <table id="fileListTable" width="100%" border="0px">
                    <tbody id="fileTableTbody">
    
                    </tbody>
                </table>
            </div>
    
        </form>
        
        
        <input type="button" onclick="uploadFile(); return false;" class="btn bg_01" value="파일 업로드">
    
    
    
    </body>
</html>

$$$$  0330_1upload.asp $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

<%@ LANGUAGE="VBscRIPT"%>
<HTML>
<BODY>
<%
Set uploadform = Server.CreateObject("DEXT.FileUpload")
uploadform.DefaultPath = "/upload/res_excel"
For i = 1 To uploadform("files").Count
uploadform("files")(i).Save
Next
Set uploadform = Nothing


Response.ContentType = "application/json"
Response.Charset = "UTF-8"

Dim responseMessage
responseMessage = "{""data"": ""Upload successful""}"

Response.Write(responseMessage)
%>
</BODY>
</HTML>
</HTML>

  topwood
  2023-10-24(09:01)
var form = $('#uploadForm');
=> var form = document.getElementById("uploadForm");

  pjunmo33
  2023-10-24(11:10)
감사합니다.
http://nausicaa.gabia.io/test2/t1.asp 와 같이변경하였는데 변화가 없습니다.
혹시 0330_1upload.asp 이파일에는 틀린곳이 없을까요?
감사합니다.~~

  topwood
  2023-10-24(11:41)
제가 위 url에서 테스트시 업로드가 되었는데 업로드한 파일이 있지 않나요?
소스보니 url 값이 없어져 있네요.
$.ajax({
url : "", => url 값이 삭제되어 있네요.

  topwood
  2023-10-24(11:53)
<%@ LANGUAGE="VBSCRIPT"%>
<%
Set uploadform = Server.CreateObject("DEXT.FileUpload")
uploadform.DefaultPath = "/upload/res_excel"
For i = 1 To uploadform("files").Count
uploadform("files")(i).Save
Next
Set uploadform = Nothing

Response.ContentType = "application/json"
Response.Charset = "UTF-8"

Dim responseMessage
responseMessage = "{""data"": ""Upload successful""}"

Response.Write(responseMessage)
%>
위 아래 태그는 삭제하세요.

  topwood
  2023-10-24(11:55)
{"data": "Upload successful"} 리턴값이 json 타입이라
success : function(result) {
if (result.data.length > 0) {
alert("성공");
location.reload();
} else {
alert("실패");
location.reload();
}
}
여기해서 받은 json 값 처리됩니다.

  pjunmo33
  2023-10-24(12:00)
감사합니다.
드디어 되었습니다.
너무 감사드립니다.
유용하게 쓰겠습니다. ^^

이글은 안지우겠습니다. topwood 님이 완성하신 그대로 두겠습니다. 모두들 유용하게 사용
하시길..... 다시한번 감사드립니다. ^^



제목 작성자 날짜 조회
ajax 파일 업로드시 (6) pjunmo33 2023-10-19 273

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})