TIP게시판

제목 [jQuery plugin] uploadify
글쓴이 터프키드 작성시각 2009/09/07 19:59:19
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 23728   RSS
파일업로드를 어떻게 처리할까 하다가 좀 센스있게 보이려고 SWFUpload를 쳐다봤는데요
jQuery에도 다중업로드를 지원하는 plugin들이 많이 있길래 그중 하나를 적용해봤습니다~

uploadify(http://www.uploadify.com) 라는 플러그인인데요
다중업로드를 지원하고 파일찾기 이미지 등 다양하게 커스터마이징이 간으합니다
progress bar가 적용 되어있어서 퍼센테이지로도 보여지구요

근데 CI랑 완전 독립을 시키려고 하니 문제가 좀 있던거 같아요.. 구버전은 CI해외포럼에서 연동방법들이
다양하게 있었는데 최신버전은 적용된게 없더군요

별수없이 파일 업로드만 처리하는 파일을 따로 두고(uploadify.php) 업로드만 맞겼습니다

<input type="file" id="letter_banner_img" />

$("#letter_banner_img").uploadify({
        'uploader'       : '/js/uploadify/uploadify.swf', // 그냥 두시면 됩니다
        'script'         : '/js/uploadify/uploadify.php', // 파일업로드를 실제로 처리할 php 파일입니다.
        'cancelImg'      : '/js/uploadify/cancel.png', // 이것도 전 그냥 쓰구요
        'folder'         : '/files/letter/imgs', // 파일이 업로드될 path 정보입니다
        'buttonImg'      : '/img/admin/file_btn.png', // 버튼이미지는 제가 만든건데 이미비를 변경하셨다면 아래 width와 height를 이미지 크기로 잡아주셔야 합니다
        'width'          : 80, // 버튼이미지의 가로크기
        'height'         : 20, // 버튼이미지의 세로크기
        'wmode'          : 'transparent',
        'queueID'        : 'letter_img2', // 큐를 보여줄 곳을 지정합니다 div id="letter_img2" 이런식으로 해두면 그 안쪽에 큐 정보를 보여줍니다(프로그래스바)
        'method'         : 'post', // get, post를 모두 지원하고 default는 post랍니다
        'scriptAccess' : 'always', 
        'scriptData'     : {
                                'tid': $('#tid').val(),
                                'fieldName' : 'banner_img',
                                'already_exists' : $("#before_banner_img").val(),
                                'type' : 'letter_banner'
                            }, // 이부분은 제가 추가로 넘겨줄 변수의 키와 값입니다.. 사용할때는 uplodify.php 파일에서 $_REQUEST['tid'] 처럼 사용됩니다
        'fileExt'         : '*.jpg;*.jpeg;*.png;*.gif', // 허용 확장자 목록입니다
        'auto'           : true, // 파일을 선택하자마자 전송을 시작합니다.. false로 해두면 기다리구요 전송시켜줄 버튼과 이벤트가 필요하게 됩니다
        'multi'          : false, // 여러개 파일을 업로드 하고싶을때 true로 변경하시면 됩니다
        onComplete         : function(event, queueID, fileObj, response, data) {
            
            $.post(
                "/admin/letter/upload_file_input",
                {
                    'ajax' : "true",
                    'file_path':obj.newTargetPath,
                    'file_name':obj.newName,
                    'tid':obj.tid,
                    'type':obj.type
                },
                function(data){

                }
            ); // 원래는 uplodify.php에서 해야하나, 제 실력이 미흡하여 업로드 파일을 별도로 제작했더니 ci의 편의시설을 이용하지 못하게 되서.. 넘어온 값을 다시 ajax를 사용해서 db에 업데이트 합니다;
           
        },
        onError: function(a, b, c, d){
            upload_file_error(a, b, c, d);
        }
    });

uploadify.php 파일의 내용입니다 그냥 업로드 하고 각종 필요값만 json으로 반환합니다
<?php
if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
	$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
	
	$extension = pathinfo($targetFile, PATHINFO_EXTENSION); 
	$new_name = $_REQUEST['fieldName']."_".$_REQUEST['tid'].".$extension";
	$newTargetFile =  str_replace('//','/',$targetPath) . $new_name;
	
	if($_REQUEST['already_exists']) unset($_REQUEST['already_exists']);
	
	move_uploaded_file($tempFile,$newTargetFile);
	$return['newTargetPath'] = $_REQUEST['folder'] . '/'.$new_name;
	$return['newName'] = $new_name;
	$return['tid'] = $_REQUEST['tid'];
	$return['type'] = $_REQUEST['type'];
	echo json_encode($return);
}
?>

해당 사이트 메뉴얼에 다 있지만, 그래도 간략하게 사용법을 적어둡니다^^;
아무래도 fla파일이나 uplodify.js 파일을 수정해서 CI와 엮을수 잇을거 같긴한데요
거기까진 제가 실력이 안되는거 같아요 ㅎㅎ

제 설명보다는 사이트의 문서를 활용하시는게 나을것 같습니다
 다음글 euc-kr 환경에서 uri에 한글 사용하기 (4)
 이전글 CI가 클래스기반이라서 어렵다고요? (2)

댓글

변종원(웅파) / 2009/09/08 17:56:43 / 추천 0
흠.. 이것도 좋네요. ^^
터프키드 / 2009/09/09 09:13:50 / 추천 0
^^ 좀더 자세하게 구현방법을 정리해놓고 싶은데
요새 시간이 쉽게 나지 않네요;;

사월 / 2009/12/17 15:10:58 / 추천 0
uploadify 와 CI Upload 라이브러리를 같이 사용할려면 config/mimes.php 의 각 확장자마다 'application/octet-stream' 를 추가해주면 됩니다.
(물론 저도 구글링해서 찾은 내용입니다 ㅋ)