[팁자료] 그누보드4 cheditor5에서 플래쉬 업로드 바꾸기
본문
그누보드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
등록된 댓글이 없습니다.