제목 | [jQuery plugin] uploadify | ||
---|---|---|---|
글쓴이 | 터프키드 | 작성시각 | 2009/09/07 19:59:19 |
|
|||
파일업로드를 어떻게 처리할까 하다가 좀 센스있게 보이려고 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' 를 추가해주면 됩니다.
(물론 저도 구글링해서 찾은 내용입니다 ㅋ) |