php 를 이용하여 multi image upload 를 구현해보았습니다.
디렉토리가 없는 경우에는 새로 생성해주며, 파일 사이즈가 일정 크기 이상이면 줄여주는 기능을 가지고 있습니다.
소스코드는 html 에 있는 ajax, form태그 , php 소스코드로 이루어져 있습니다.
--> html 에 있는 ajax 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <script> $(document).ready(function() { var imageUrls = []; $("#uploadForm").on('submit', (function(e) { // $("#uploadForm").on('submit', (function(e) { event.preventDefault(); var data = new FormData(this); // $.each($("#multiImageInput")[0].files, function(key, file) { // console.log(key + file + "_"); // data.append(key, file); // }); $.ajax({ url: "workMultiImg.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: encodeURI(data), // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData: false, // To send DOMDocument or non processed data file it is set to false success: function(json, status) // A function to be called if request succeeds { returnJson = JSON.parse(json); alert($.trim(json)); //JSON.parse(json).status if (returnJson.status == "OK") { // 원하는 상태 정의 } }, error: function(e) { alert("error"); } }); })); }); </script> | cs |
--> html form 소스 코드
1 2 3 4 5 6 7 8 9 | <form id="uploadForm" action="multiImageUpload.php" method="post"> <input name="upload[]" id="multiImageInput" type="file" onchange="previewFiles()" multiple><br> <img src="" alt="Image preview..." name="preview0" style="display:none;"> <img src="" alt="Image preview..." name="preview1" style="display:none;"> <img src="" alt="Image preview..." name="preview2" style="display:none;"> <img src="" alt="Image preview..." name="preview3" style="display:none;"> <img src="" alt="Image preview..." name="preview4" style="display:none;"> <input id="formBtn" type="submit" value="사진 올리기" /> </form> | cs |
--> 사진 업로드를 처리하는 php 소스 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <?php //$files = array_filter($_FILES['upload']['name']); something like that to be used before processing files. // Count # of uploaded files in array //$total = $_FILES['upload']['name']; // if ( $_FILES['upload']['error'][0] != 0 ){ // echo '{"status":"No FILE"}'; // return; // } // $total = safeCount($_FILES['upload']['name']); // for ($i = 0 ; $i < $total ; $i++) { // imageCompressAndUpload("userImages/"."multiTest", "mainImg_".$i , $i ); // } // imageCompressAndUpload("userImages/".$phone."_".$datepicker, "mainImg"); function imageCompressAndUpload( $uploads_dir, $changedName, $array_num, $inputName ){ $show = ""; $show = $show."{"status":""; // 설정 $allowed_ext = array('jpg','jpeg','png','gif'); // 폴더 존재 여부 확인 ( 없으면 생성 ) if ( !is_dir ( $uploads_dir ) ){ mkdir( $uploads_dir ); } // 변수 정리 $error = $_FILES[$inputName]['error'][$array_num]; $name = $_FILES[$inputName]['name'][$array_num]; $ext = array_pop(explode('.', $name)); // 오류 확인 if( $error != UPLOAD_ERR_OK ) { switch( $error ) { case UPLOAD_ERR_INI_SIZE: case UPLOAD_ERR_FORM_SIZE: $show = $show."파일이 너무 큽니다. ($error)"; break; case UPLOAD_ERR_NO_FILE: $show = $show."파일이 첨부되지 않았습니다. ($error)"; break; default: $show = $show."파일이 제대로 업로드되지 않았습니다. ($error)"; } $show = ($i+1)."번째 파일을 올릴 수 없습니다."; echo $show; exit; } // 확장자 확인 if( !in_array($ext, $allowed_ext) ) { $show = $show.$name."파일은 허용되지 않는 확장자입니다."; $show = $show.""}"; echo $show; exit; } $url = "{$uploads_dir}/{$changedName}.{$ext}"; $filename=""; if ( $_FILES[$inputName]['size'] > 500000 ){ $filename = compress( $_FILES["upload"]["tmp_name"][$array_num] , $url, 80 ); }else{ move_uploaded_file( $_FILES[$inputName]['tmp_name'][$array_num] , $url ); } $show = $show."OK","; $show = $show.""파일명" : "$name", "; $show = $show.""확장자" : "$ext", "; $show = $show.""파일형식" : "{$_FILES[$inputName]['type']}", "; $show = $show.""파일크기" : "{$_FILES[$inputName]['size']} 바이트", "; $show = $show.""url" : "{$url}", "; $show = $show.""filename" : "{$filename}"}"; echo $show; } // 파일 압축 메소드 function compress($source, $destination, $quality) { $info = getimagesize($source); if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source); elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source); elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source); imagejpeg($image, $destination, $quality); return $destination; } function safeCount($array) { if (isset($array)) return count($array); return -1; } ?> | cs |
++ 참고 ++
var sendData = new FormData($("#recordForm")[0]);
// 위의 코드는
new FormData(this)
// 아래의 코드와 같다.