파일업로드를 어떻게 처리할까 하다가 좀 센스있게 보이려고 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와 엮을수 잇을거 같긴한데요
거기까진 제가 실력이 안되는거 같아요 ㅎㅎ
제 설명보다는 사이트의 문서를 활용하시는게 나을것 같습니다