Rev. 2.73

581915.gif

Shaun Inman씨는 깔끔한 파일 타입 인풋을 자바스크립트와 CSS 그리고 DOM을 이용해 만드는 과정을 소개했다. 우선 데모를 확인하기 바란다. 뭔가 허전하지 않은가? 텍스트 영역과 업로드 버튼이 사라지고 없다. "Choose file..."을 클릭하여 파일을 선택하면 자바스크립트에 의해 자동으로 파일의 업로드가 진행되어 조금 더 사용성이 좋은 파일 업로드 환경을 제공할 수 있다.

label 태그의 class에는 "cabinet"을 그리고 input태그의 class에 "file"을 정의했다. 충돌을 막기위해 부모 엘리먼트가 필요하며, 부모 엘리먼트의 class는 "SI-FILES-STYLIZED"로 가정하자.

마크업 하기

<label class="cabinet"> 
    <input type="file" class="file" />
</label>

스타일시트

.SI-FILES-STYLIZED label.cabinet {
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

첫 번째 프로퍼티는 포장될 엘리먼트의 스타일이다. 버튼의 이미지까지 들고 있다. 두번째 프로퍼티는 인풋의 스타일이다. 완전히 투명한 알파값을 지니고 있다. 그리고 정확하게 두 엘리먼트가 포개지는 구성을 가지고 있다는 것을 알 수 있다. 허상으로 나타는 input 버튼이 작동하게 하기 위한 트릭이라는 것을 알 수 있다.

자바스크립트

<script type="text/javascript" src="/path/to/si.files.js"></script>

자바스크립트 파일을 인클루드하고 onload 이벤트에 SI.Files.stylizeAll();를 선언하면 완료된다. IE 5.5+, 파이어폭스 1.5+, 사파리 2+ 에서 작동되며, 라이브러리와 예제는 이곳에서 다운로드 할 수 있다. 딱 한가지 단점이라면 자바스크립트가 작동하지 않는 환경에서는 업로드가 정상적으로 작동하지 않는 것이다.

Comments

Harald Kirschner씨는 MooTools 자바스크립트 라이브러리와 플래시를 이용하여 복수 파일을 업로드할 수 있게하는 FancyUpload를 만들고 공개했다. 파일들의 관리를 위한 업로드 큐와 전송 과정을 효과적으로 표현하는 프로그레스 바를 갖추고 있으며 세부적인 이벤트 반환 및 필터링 등 다양한 부가옵션을 지원한다. 특히, 자바스크립트가 작동되지 않는 환경에서도 작동하록 설계되어 FancyUpload 함수가 초기화(Initialize)되기 전에는 form태그의 액션이 그대로 동작한다. 파일 업로드에 swf와 자바스크립트가 결합되어 얻는 장점은 멀티 업로드 뿐만이 아니다. 서버에 업로드하지 않고 파일의 용량을 알 수 있어서 용량제한 유효성(Validate) 검사를 클라이언트-사이드에서 할 수 있는 이점도 있다. 이 라이브러리는 플래시 버전 8 이상에서 동작하며, IE6+, Opera9, Firefox1.5+, Safari2+를 지원한다.

FancyUpload를 곧 오픈예정인 기네스 프로젝트에 사용할 목적으로 Prototype/Scriptaculous기반 사이트에서 사용할 수 있도록 컨버전(conversion)했다. MooTools에는 플래시 오브젝트를 효율적으로 다루기 위한 Swiff라는 라이브러리가 있는데, 이 것을 필수로 요구하기 때문에 함께 컨버전 되었다. 아래에 설치된 예제는 Playground의 PHP 구현 예제를 응용하여 Ajax로 업로드 결과를 받아오는 과정을 추가한 것이다. "Browse..." 클릭 후 파일들을 왕창 긁어서 업로드 해 보자. 참고로 업로드한 파일은 서버에 저장하지 않으며, 한글이 섞인 파일명의 처리가 무시되어 업로드에 실패하는 상황도 발생한다.

Select Files
Upload Queue
Check the selected files and start uploading.
  •  
FancyUpload = new FancyUpload('upload-filedata', {
  url: '/lab/upload.php', // Upload target URL, default is form-action if given, otherwise current page
  swf: '/swf/swiff.uploader.swf', // Path & filename of the swf file
  multiple: true, // Multiple files selection, default: true
  types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'}, // extensions
  limitSize: false, //Maximum size for one added file
  limitFiles: false, // Maximum files in the queue, default: false
  queueList: 'upload-queue', // The Element or ID for the queue list
  uploadTimeout: '6', // upload timeout (sec)
  onAllComplete: function() { // Event fired when all files uploaded
    // Ajax.Request for upload result
    new Ajax.Request('/lab/upload-result.php', {
      mothod: 'POST', onSuccess: function(req) {
        setTimeout(function() {
          // clear the queue list
          FancyUpload.clearList();
        }, 1500);
        // display the upload result
        $('upload-status').innerHTML = req.responseText;
      }
    });
  }
});

본 자바스크립트 라이브러리의 라이센스는 MIT-License를 따른다. 어떠한 환경에서건 자유롭게 재가공하여 사용할 수 있지만, 저자권(copyright) 마크는 절대로 지울 수 없다는 내용이다.

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments