구글상단(728X90)




다음 에디터 여러(다중) 이미지 업로드 하기... 컴퓨터

GitHub의 다음 에디터 지원이 끊어졌는지 이슈를 등록해도
답이 없습니다. 질문 및 답변을 다음개발자 센터에서 해야 한다고 합니다.

다음에디터의 여러 이미지 등록은 아주 간단한 팁임에도
답변이나 관련 자료가 없어서 이렇게  포스팅해 봅니다.

다음 에디터의 이미지 업로드는 로컬경로에 설치된 /daumeditor/pages/trex/ "의 
image.html 이 처리를 담당하게 됩니다.

이 image.html 파일을 열면

아래쪽 JavaScript 내에 funtion done() 함수가
이미지 처리를 담당하며 이 함수내 변수 var _mockdata 가 이미지 
업로드를 처리 합니다.

그러니까 이 _mockdata 변수를 배열처리해서 에디터로 보내면
여러 이미지를 처리 할 수 있게 되는거죠!

혹시 질문 하실까봐 적지만 이렇게 다중 이미지를 처리 하려면 파일 Input Box 에 
아래와 같이 multiple 과 배열을 선언하여 이미지를 불러온 후 다시 이걸 ASP나 PHP 등으로 
처리한 후에 관련 내용을 다시 JavaScript에 붙여넣는 과정을 거쳐야 합니다.

PHP 예시) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form method = "post" action = "./이미지_처리.php" name="imgfrm" id="imgfrm" enctype="multipart/form-data">
 
<input type="file" name="upload_file[]" id="upload_file" size='80' multiple>
 
</form>
 
//이미지_처리.php
<?PHP
 
$upload_file    = $_FILES['upload_file']['name'];
$upload_tmp        = $_FILES['upload_file']['tmp_name'];
$upload_type    = $_FILES['upload_file']['type'];
 
$fCnt = count($upload_file);
 
for($i=0;$i<$fCnt;$i++
{
 
    $이미지 = $upload_file 처리
    .
    .
    .
    .
    $변수 처리값...//image.html 페이지의 done 함수에 적용될 _mockdata 처리값!
  (넣고 싶은 이미지 개수만큼 반복시키면 됨)
 
 
}
 
PHP?>
 
cs

Image.html 페이지의 자바스크립트에 아래와 같이 변수를 선언하면 됨...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function done() 
{
    if (typeof(execAttach) == 'undefined'
    { 
        //Virtual Function
        return;        
    }
        
    //다중 이미지 업로드를 위해서 배열 추가..
    var _mockdata = new Array(); //배열 선언
    
   //첫번째 이미지 처리    
    _mockdata[0= {
    
        'imageurl''./upload_img/test1.jpg',            
        'filename''test1.jpg',
        'filesize'183111,
        'imagealign''C',
        'originalurl''./upload_img/test1.jpg',
        'thumburl''./upload_img/test1.jpg'
    };
    
    //두번째 이미지 처리    
    _mockdata[1= {            
            
        'imageurl''./upload_img/test2.jpg',            
        'filename''test2.jpg',
        'filesize'197696,
        'imagealign''C',
        'originalurl''./upload_img/test2.jpg',
        'thumburl''./upload_img/test2.jpg'
    };
    
    //배열로 저장된 이미지를 에디터로 보낸다
    for (var i=0;i<_mockdata.length;i++
    {        
        execAttach(_mockdata[i]);    
    }
        
    closeWindow();
 
}
cs

위의 _mockdata 를 반복시키는 것 만큼 이미지가 등록되는 겁니다.
혹시라도 이해를 못하시는 분들이 계실까봐....ㅎ

아래는 크롬 브라우저로 테스트한 스크린 샷 




P.S : 부족한 포스팅이지만 퍼가실때 출처 한줄 정도는 부탁드리겠습니다.


덧글

  • 질문 2017/02/21 01:05 # 삭제 답글

    $이미지 = $upload_file 처리
    .
    .
    .
    .

    죄송하지만 이 부분이 이해가 가질 않습니다... 어떻게 해야 되나요?
  • Heb614 2017/02/21 09:58 #

    $이미지는 변수명이고 $업로드 이미지는 업로드한 이미지나 처리될 이미지를 뜻합니다!
    즉 스크립트 구문내에 반복적으로 삽입될 변수를 처리하면 된다는 뜻 입니다
댓글 입력 영역


구글광고(160X600)