폴더 구조

[HTML]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="form01" name="form01" enctype='multipart/form-data' action='test.php' method="post">
      <input type="hidden" id="img_count" name="img_count">
      <input type="file" class="file-btn" id="file-btn-0">
      <div class="swiper-wrapper"></div>
    </form>
    <button type="button" id='sendButton'>send</button>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
 
 

[javascript]

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
$(document).ready(function(){
    // 첨부 파일 개수 변수
    var index = 0;
    // 첨부 파일
    $(document).on('change','.file-btn'function(){
        console.log("감지");
        var target = $(this)[0];
        
        if(target != null){
            //------------------이미지 확장자 검사 시작--------------------------------//
            var fileNM = $(this).val();
 
            var ext = fileNM.slice(fileNM.lastIndexOf("."+ 1).toLowerCase();
 
            if (!(ext == "gif" || ext == "jpg" || ext == "png")) {
                alert("이미지파일(.jpg, .png, .gif)만 업로드 가능합니다.");
                return false;
            }
            //------------------이미지 확장자 검사 종료--------------------------------//
        
            var fileList = target.files ;
        
            // 파일리더기 생성
            var reader = new FileReader();
            
            // 파일 위치 읽기
            reader.readAsDataURL(fileList [0]);
            
            //로드 한 후 이미지 요소 설정(스타일,url)
            reader.onload = function  (e) {
                // 이미지 미리보기
                
                var img_result = '<input type="hidden" id="file'+index+'" name="file'+index+'" value="'+e.target.result+'">';
                $('.swiper-wrapper').append(img_result);
                
                
            };
            // 이미지 파일 첨부 버튼 추가 하기
            // 새로운 div 생성
            var div = document.createElement('div');
 
            index++;
            $("#img_count").val(index);
        }
    });
 
    $('#sendButton').on('click',function(){
        $('#form01').submit();
    });
})
 

[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
<?php
error_reporting(E_ALL);
ini_set('display_errors''1');
$i = 1;     // 업로드해야할 이미지 파일이 여러개이면 while문으로 돌려야 함..
$upload_dir = "../test01/image/";
$file_name = "image";
 
if (preg_match('/^data:image\/(\w+);base64,/'$_POST['file'.$i], $type)) {
    $data = substr($_POST['file'.$i], strpos($_POST['file'.$i], ','+ 1);
    $type = strtolower($type[1]); // jpg, png, gif
    
    
    $data = base64_decode($data);
 
    if ($data === false) {
        throw new Exception('base64_decode failed');
    }
    
    $image = imagecreatefromstring($data);
 
    // 이미지의 가로 세로 구하기
    $size = getimagesize($_POST['file'.$i]);
 
    // 이미지 회전 방법
    if($size[0> $size[1]){        // 이미지 가로크기가 세로보다 크다면 270도 만큼 회전
        $image = imagerotate($image2700);
    }
    
    // header('Content-type:image/jpeg');
    // 이미지 저장 이름 및 저장 경로
    $directory = $upload_dir."".$file_name.".{$type}";
    if($type == 'jpeg'){ 
        $saveImage = imagejpeg($image$directory); 
    }else if($type == 'png'){
        $saveImage = imagepng($image$directory); 
    }else if($type == 'gif'){
        $saveImage = imagegif($image$directory); 
    }
    
    imagedestroy($image);
 
    if($saveImage){
        echo "success";
    }else{
        echo "fail";
    }
    
    
else {
    throw new Exception('did not match data URI with image data');
}
?>
 
 

'WAMP > php' 카테고리의 다른 글

file_put_contents( )함수를 이용한 파일 저장  (0) 2019.09.18
php에서 mail 보내기  (0) 2019.08.30
php에서 curl 사용하기  (0) 2019.08.30
로그 파일 생성  (0) 2019.08.28
wamp [회원 정보 수정] 기능만들기  (0) 2019.05.30

+ Recent posts