그누보드4 cheditor5에서 플래쉬 업로드 바꾸기 > gnuboard

그누보드4 에서 플래쉬를 통해 업로드를 하던 부분이 플래쉬가 서비스 종료되므로

더이상 지원이 되지 않는 이부분을 수정하기 위한 설정.

기존 플래쉬로 업로드 되던 부분을 업로드 수정한다. 

수정파일 2개 

/cheditor5/popup/image.html 

/cheditor5/popup/js/image.js 

먼저 이두개의 파일을 백업을 해두시는게 좋겠습니다. 

-------------- image.html 수정 ----------------- 

기존 

<script src="js/image.js" type="text/javascript"></script> 

<script src="js/image_upload_flash.js" type="text/javascript"></script> 

<script type="text/javascript"> 

</script> 

이부분을 

<script src="js/image.js" type="text/javascript"></script> 

<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> 

<script src="js/dialog.js" type="text/javascript"></script> 

<!-- <script src="js/image_upload_flash.js" type="text/javascript"></script> --> 

<script type="text/javascript"> 

    function noFlashUploadOpen() { 

        $("#nfile").click(); // 숨김 input file를 클릭하는 효과 

    } 

function noFlashUpload() { 

console.log("?"); 

var uplist = $("#nfile").get(0).files; // 숨김 input file에서 파일 배열을 가져옴 

if(uplist.length < 1) return; // 첨부없으면 끝 

for(var i = 0; i < uplist.length; i++) { // 각 파일의 형식 제한 

if(uplist[i].type != "image/png" && uplist[i].type != "image/gif" && uplist[i].type != "image/jpg" && uplist[i].type != "image/jpeg") { 

fileFilterError(uplist[i].name); return; 

} 

} 

// 업로드 시작 알림(로더) 

startUpload(uplist.length); // image.js 

// 업로드 작업 

// cheditor5/imageUpload/upload.php 에서 1개씩만 업로드를 처리하므로 개별처리 

// 순차 처리를 위해서 ajax의 비동기를 끔 async: false 

// 업로드 진행율이 필요없으므로 xhr 은 제외 

for(var i = 0; i < uplist.length; i++) { 

var formData = new FormData(); 

formData.append("file", uplist[i]); 

$.ajax( { 

url: UploadScript, 

type: "POST", 

contentType: false, 

processData: false, 

crossDomain: true, 

cache: false, 

async: false, 

dataType: "text", // 여기 본인 상황에 맞게 

data: formData, 

success: function(response, textStatus, xhr) { 

uploadComplete(response); 

}, 

error: function(xhr, textStatus, error) { 

console.log(xhr.responseText); 

} 

}); 

} 

} 

</script> 

이부분을  

<div style="float:right;margin:0px 0px 7px 0px"> 

<table border="0" cellpadding="0" cellspacing="0"> 

<tr> 

<td id="oFlash"></td> 

<td><img src="../icons/imageUpload/remove_all.gif" class="button" style="margin-left:3px;vertical-align:middle" onclick="removeImage()" alt="" /></td> 

</tr> 

</table> 

</div> 

아래처럼 수정 

<div style="float:right;margin:0px 0px 7px 0px"> 

<table border="0" cellpadding="0" cellspacing="0"> 

<tr> 

<td id="oFlash"><input type="file" id="nfile" name="nfile" multiple="multiple" accept=".gif,.jpg,.jpeg,.png" style="display:none" onchange="noFlashUpload()"/> <img src="../icons/imageUpload/add_image_button.gif" style="margin-left:3px;vertical-align:middle;cursor:pointer" onclick="noFlashUploadOpen()" alt="" /></td> 

<td><img src="../icons/imageUpload/remove_all.gif" class="button" style="margin-left:3px;vertical-align:middle" onclick="removeImage()" alt="" /></td> 

</tr> 

</table> 

</div> 

-------------- image.js 수정 ----------------- 

기존파일의 최하단에 다음을 추가 

function noFlashUploadOpen() { 

    $("#nfile").click(); // 숨김 input file를 클릭하는 효과 

} 

function noFlashUpload() { 

    var uplist = $("#nfile").get(0).files; // 숨김 input file에서 파일 배열을 가져옴 

    if(uplist.length < 1) return; // 첨부없으면 끝 

    for(var i = 0; i < uplist.length; i++) { // 각 파일의 형식 제한 

        if(uplist[i].type != "image/png" && uplist[i].type != "image/gif" && uplist[i].type != "image/jpg" && uplist[i].type != "image/jpeg") { 

            fileFilterError(uplist[i].name); return; 

        } 

    } 

    // 업로드 시작 알림(로더) 

    startUpload(uplist.length); // image.js 

    // 업로드 작업 

    // cheditor5/imageUpload/upload.php 에서 1개씩만 업로드를 처리하므로 개별처리 

    // 순차 처리를 위해서 ajax의 비동기를 끔 async: false 

    // 업로드 진행율이 필요없으므로 xhr 은 제외 

    for(var i = 0; i < uplist.length; i++) { 

        var formData = new FormData(); 

        formData.append("file", uplist[i]); 

        $.ajax( { 

            url: UploadScript, 

            type: "POST", 

            contentType: false, 

            processData: false, 

            crossDomain: true, 

            cache: false, 

            async: false, 

            dataType: "text", // 여기 본인 상황에 맞게 

            data: formData, 

            success: function(response, textStatus, xhr) { 

                uploadComplete(response); 

            }, 

            error: function(xhr, textStatus, error) { 

                console.log(xhr.responseText); 

            } 

        }); 

    } 

} 

 

참고자료 : https://sir.kr/g5_tip/15115

추천0
비추천 0