[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($image, 270, 0);
}
// 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 |
