'uploadify'에 해당되는 글 1건

  1. 2010/04/07 visualp uploadify uploder 플러그인

uploadify uploder 플러그인

PHP RSS Icon ATOM Icon 2010/04/07 09:53 visualp
[원문] - http://codeigniter-kr.org/tip/view/236/page/3/

파일업로드를 어떻게 처리할까 하다가 좀 센스있게 보이려고 SWFUpload를 쳐다봤는데요
jQuery에도 다중업로드를 지원하는 plugin들이 많이 있길래 그중 하나를 적용해봤습니다~

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

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

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

01.<input type="file" id="letter_banner_img" />
02.  
03.$("#letter_banner_img").uploadify({
04.        'uploader'       : '/js/uploadify/uploadify.swf', // 그냥 두시면 됩니다
05.        'script'         : '/js/uploadify/uploadify.php', // 파일업로드를 실제로 처리할 php 파일입니다.
06.        'cancelImg'      : '/js/uploadify/cancel.png', // 이것도 전 그냥 쓰구요
07.        'folder'         : '/files/letter/imgs', // 파일이 업로드될 path 정보입니다
08.        'buttonImg'      : '/img/admin/file_btn.png', // 버튼이미지는 제가 만든건데 이미비를 변경하셨다면 아래 width와 height를 이미지 크기로 잡아주셔야 합니다
09.        'width'          : 80, // 버튼이미지의 가로크기
10.        'height'         : 20, // 버튼이미지의 세로크기
11.        'wmode'          : 'transparent',
12.        'queueID'        : 'letter_img2', // 큐를 보여줄 곳을 지정합니다 div id="letter_img2" 이런식으로 해두면 그 안쪽에 큐 정보를 보여줍니다(프로그래스바)
13.        'method'         : 'post', // get, post를 모두 지원하고 default는 post랍니다
14.        'scriptAccess' : 'always'
15.        'scriptData'     : {
16.                                'tid': $('#tid').val(),
17.                                'fieldName' : 'banner_img',
18.                                'already_exists' : $("#before_banner_img").val(),
19.                                'type' : 'letter_banner'
20.                            }, // 이부분은 제가 추가로 넘겨줄 변수의 키와 값입니다.. 사용할때는 uplodify.php 파일에서 $_REQUEST['tid'] 처럼 사용됩니다
21.        'fileExt'         : '*.jpg;*.jpeg;*.png;*.gif', // 허용 확장자 목록입니다
22.        'auto'           : true, // 파일을 선택하자마자 전송을 시작합니다.. false로 해두면 기다리구요 전송시켜줄 버튼과 이벤트가 필요하게 됩니다
23.        'multi'          : false, // 여러개 파일을 업로드 하고싶을때 true로 변경하시면 됩니다
24.        onComplete         : function(event, queueID, fileObj, response, data) {
25.              
26.            $.post(
27.                "/admin/letter/upload_file_input",
28.                {
29.                    'ajax' : "true",
30.                    'file_path':obj.newTargetPath,
31.                    'file_name':obj.newName,
32.                    'tid':obj.tid,
33.                    'type':obj.type
34.                },
35.                function(data){
36.  
37.                }
38.            ); // 원래는 uplodify.php에서 해야하나, 제 실력이 미흡하여 업로드 파일을 별도로 제작했더니 ci의 편의시설을 이용하지 못하게 되서.. 넘어온 값을 다시 ajax를 사용해서 db에 업데이트 합니다;
39.             
40.        },
41.        onError: function(a, b, c, d){
42.            upload_file_error(a, b, c, d);
43.        }
44.    });

uploadify.php 파일의 내용입니다 그냥 업로드 하고 각종 필요값만 json으로 반환합니다
01.<?php
02.if (!empty($_FILES)) {
03.    $tempFile = $_FILES['Filedata']['tmp_name'];
04.    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
05.    $targetFile str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
06.      
07.    $extension = pathinfo($targetFile, PATHINFO_EXTENSION); 
08.    $new_name = $_REQUEST['fieldName']."_".$_REQUEST['tid'].".$extension";
09.    $newTargetFile str_replace('//','/',$targetPath) . $new_name;
10.      
11.    if($_REQUEST['already_exists']) unset($_REQUEST['already_exists']);
12.      
13.    move_uploaded_file($tempFile,$newTargetFile);
14.    $return['newTargetPath'] = $_REQUEST['folder'] . '/'.$new_name;
15.    $return['newName'] = $new_name;
16.    $return['tid'] = $_REQUEST['tid'];
17.    $return['type'] = $_REQUEST['type'];
18.    echo json_encode($return);
19.}
20.?>
2010/04/07 09:53 2010/04/07 09:53
TAG
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/233

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/233