PHP 로 jQuery 와 AJAX를 이용해서 파일을 업로드하는데 한참 삽질을 하고 적어둔다.
어쩌다 필요해서 하려고 하면 생각도 안나고 다시 제자리 걸음을 반복하는 초보자의 길을 언제나 벗어나려나 ㅠㅠ
MDB(Meterial Design Bootstrap) 기반 템플릿을 활용하여 코딩을 하느라고 class 가 이상것이 보이는 것이니 혹시라도 이 게시글을 읽으시는 분은 그냥 그런게 있나보다 하고 참조만 하시라.
파일 전송 Form 파일
<form id="uploadphoto" action="MemberPhotoUpload.php" method="post" enctype="multipart/form-data">
<div class="card border-light mb-3" style="max-width: 30rem;">
<div class="card-body text-dark">
<h5 class="card-title">Image File Upload</h5>
<input type="file" id="file" name="file" multiple />
<input type="submit" value="Upload Photo" class="btnSubmit" />
</div>
</div>
</form> |
<table class='table table-responsive-sm' id='photoIDX' uid='<?php echo $idx;?>'>
<tr><td colspan='5'>★★사진 등록시 [등록하기] , 사진 수정시 [사진을 클릭]하세요.</td></tr>
<tr>
<td rowspan='3'>
<?php
if(file_exists($imgpath)){
echo "<img src='MemberPhotoView.php?idx=$idx&uid=$uid' width=115 height=140>";
} else {
echo "사진없음<br><span class='btn-floating peach-gradient photoBtn'><i class='fas fa-image'></i>등록하기</span>";
}
?>
</td>
<th>아이디</th>
<td><?php echo $row['userID'];?></td>
<th>사무실번호</th>
<td style='text-align:left;height:15px;'><?php echo $row['telNO'];?></td>
</tr>
<tr>
<th>성명</th>
<td><?php echo $row['userNM'];?></td>
<th>휴대폰번호</th>
<td style='text-align:left;height:15px;'><?php echo $mobileNO;?></td>
</tr>
<tr>
<th>직위</th>
<td><?php echo $chargeArr[$row['codeID']];?></td>
<th>주업무</th>
<td style='text-align:left;height:15px;'><?php echo $row['workrole'];?></td>
</tr>
<tr>
<th>E-Mail</th>
<td colspan='4' style='text-align:left;height:15px;'><?php echo $row['email'];?></td>
</tr>
</table> |
Script 파일
<script>
$('.photoBtn').click(function(){
var $obj=$(this);
var idx=$(this).closest('#photoIDX').attr('uid');
$('#dialog').load('MemberPhotoForm.php?idx='+idx, function() {
$(this).dialog({
autoOpen : true,
height : 'auto',
width : 'auto',
position: { my: "center", at: "center", of: window },
title : '사진 업로드',
buttons : {
"닫기" : function() {
$(this).dialog("close");
}
}
});
PhotoUploadChk(idx);
});
});
function PhotoUploadChk(idx){
$('form#uploadphoto').submit(function(e){
e.preventDefault();
var formData = new FormData();
var files = $('#file')[0].files[0];
formData.append('file',files);
formData.append('uid',idx); formData.append('osType',$('select[name=osType]').val());
var upfiles_cnt = $("input:file", this)[0].files.length;
if(upfiles_cnt == 0){
alert('선택된 파일이 없습니다.');
return false;
}
$.ajax({
url: 'MemberPhotoUpload.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function (msg) {
if(msg == 1){
MemberView(idx);
} else if(msg == 0){
alert('form 데이터 오류인지 확인하세요.');
} else {
alert('파일이 업로드되지 못했습니다.');
}
}
});
});
}
</script> |
PHP 파일 업로드 관련 파일
<?php
if(isset($_POST['uid']) && $_POST['uid']>0){
$idx=$_POST['uid'];
$tmpname = $_FILES['file']['tmp_name'];
$realname = $_FILES['file']['name'];
$fileExt = getExt($realname);
$file_path='./photos/'.$idx.'.jpg';
if (is_uploaded_file($tmpname)) {
if (!strstr('[jpg]',$fileExt)) {
echo "-1";
exit;
}
move_uploaded_file($tmpname,$file_path);
@chmod($file_path,0606);
echo "1";
}
} else {
echo "0";
}
function getExt($filename){
$ext = substr(strrchr($filename,"."),1);
$ext = strtolower($ext);
return $ext;
}
?>
|
파일 사이즈 검사하여 파일 사이즈를 줄이는 코드는 포함되지 않았다.
$("#uploadbutton").click(function(){
var form = $('form')[0]; // 폼객체를 불러와서
var formData = new FormData(form); // FormData parameter 에 담아줌
$.ajax({
url: 'fileupload',
processData: false,
contentType: false,
data: formData,
type: 'POST',
success: function(result){
alert("업로드 성공!!");
}
});
});
