php 를 이용한 multi image upload 구현하기

 


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] , $url80 );
        }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)
// 아래의 코드와 같다.