SWFUpload

Ajax를 사용해서 폼 데이터를 넘길때 일반적인 데이터 외에 업로드 작업이 되어야 하는데, 현재 동시에 이뤄지지 않는다. 이로 인해 일반적으로 iframe을 통한 업로드등을 쓰고 있으며 또 다른 방법으로 플래시를 이용한 업로드 방법을 사용한다. 액션 스크립트를 사용해서 개별적인 업로드 콤포넌트들이 많이 나와있지만, 많이 알려진 SWFUpload를 사용하기로 했다. 원래 DHTML 지원 자바스크립트 프레임웍은 mootools를 사용하는 편이라 잘 알려진 fancyupload 라는 플래시 업로드 콤포넌트가 있지만 살펴본 결과 다분히 개인적이지만 완성도가 SWFUpload에 비해 좋지 않은 관계로 사용하기로 결정했다.

SWFUpload도 실상 메뉴얼이 잘되어 있는편은 아니며 파일내에 demos를 참고해서 사용해야 한다. 그리고 각 이벤트에 대한 핸들러 콜백 함수들과 파일 프로그레스에 대한 부가 기능들을 커스터 마이징 하기에는 버거운 면이 있지만 일단 선택해서 일주일정도 고생해서 터득한 상태이므로 차후에 손대 보기로 했다.

사이트 : http://swfupload.org/

invalid-file

invalid-file

2.1.0 베타 버전이며 최근 업데이트가 빈번하며 각 버전간 차이도 좀 많은듯 하다.
일단 코드를 보면서 사용시 주의해야 될 점만 체크해보자.

 <script type="text/javascript" src="../swfupload/swfupload.js"></script>
 <script type="text/javascript" src="js/swfupload.queue.js"></script>
 <script type="text/javascript" src="js/fileprogress.js"></script>
 <script type="text/javascript" src="js/handlers.js"></script>
 <script type="text/javascript">
  var swfu;

  window.onload = function() {
   var settings = {
    flash_url : "../swfupload/swfupload_f9.swf",
    upload_url: "../simpledemo/upload.php", // Relative to the SWF file upload 스크립트 URL위치는 swfupload_f9.swf 위치를 기준으로한 상대위치를 적어주어야 한다.(건성으로 하다 3일 고생;)
    post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
    file_size_limit : "100 MB",
    file_types : "*.*",
    file_types_description : "All Files",
    file_upload_limit : 100,
    file_queue_limit : 0,
    custom_settings : {
     progressTarget : "fsUploadProgress",
     cancelButtonId : "btnCancel"
    },
    debug: false, 작성시 true 로 디버깅 뒤 false로 변경할것

    // The event handler functions are defined in handlers.js
    file_queued_handler : fileQueued,
    file_queue_error_handler : fileQueueError,
    file_dialog_complete_handler : fileDialogComplete, 파일큐 및 선택작업이 모두 끝나면 함수에 실제 업로드를 위해 his.startUpload() 호출
    upload_start_handler : uploadStart,
    upload_progress_handler : uploadProgress,
    upload_error_handler : uploadError,
    upload_success_handler : uploadSuccess,
    upload_complete_handler : uploadComplete,
    queue_complete_handler : queueComplete // Queue plugin event
   };

   swfu = new SWFUpload(settings);
      };
 </script>

일단 커스터마이징은 미루고 약간 수정만으로 기능 사용~!
게시판등에서 사용하려면 세션아이디 이용해서 임시저장 한 뒤 이후에 게시물 ID로 수정 혹은 게시물을 임시 저장한뒤 게시물 ID 파일에 부여 (전자 추천)

[메모1] upload_url에 명시된 파일 *.php에서 업로드 처리 후 실패든 성공이든 echo, print등으로 값을 출력해야 연속으로 큐된 파일인 경우 다음 파일 업로드 자동 처리로 넘어감. 값이 없는 경우 여러개의 파일을 업로드 해도 첫 파일만 업로드 후 다음 파일 처리로 넘어가지 않음.

> 2.0.2 버전 혹시몰라 첨부

invalid-file

> 2.1.0 수정본

invalid-file