파일업로드를 어떻게 처리할까 하다가 좀 센스있게 보이려고 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.
?>