[JQuery]ajax, jquery 로 이미지 업로드시키기 2

 

ajax, jquery 로 이미지 업로드시키기 1  [기존강의 참고]

https://wonpaper.tistory.com/72

 

사진등록 버튼을 눌러 간단히 ajax 형태로 이미지 업로드 처리를 해보자.

관련 백엔드는 PHP 언어를 기본으로 해보았다.

 

[실제 화면 페이지]

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
 
<form name="fphoto" method="post" enctype="multipart/form-data">
<input type="text" id="file_route" onfocus="this.blur();" readonly style="display:none;">
<input type="file" id="upload-image" name="userfile1" accept="image/*" onchange="javascript:document.getElementById('file_route').value=this.value" />
</form>
 
<script>
$("#upload-image").on('change',function(e){
 
    e.preventDefault();
    var val = $("#upload-image").val();
    if (val=="") {
        alert("이미지 파일을 선택하여 주십시오.");
        return false;
    }
 
    var fd = new FormData($("#fphoto")[0]); 
    fd.append("userfile1",$("input[name=userfile1]")[0].files[0]);
 
        $.ajax({
            type: "post",
            url: "ajax.php?id=test",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status,xhr) {
                alert("사진이 정상적으로 변경되었습니다.");
                window.location.reload(true);
    //            alert(data);
            },
            error: function(xhr,status,error) {
                alert("사진 업로드시 에러 발생");
                return false;
            }
        });
 
});
</script>

 

 

[ajax.php]

실제 data 값을 넘겨 받아서 이미지를 업로드 시키고, DB 추가 및 수정시킨다.

 

<?
session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/config_noCharset.php";
 
$id    = trim($_GET['id']);
 
if ($id) {
    $data_dir="../member_face";    
 
    $filename1 = uploadImage($data_dir,$_FILES['userfile1'],50);
    $filesize1 = $_FILES[userfile1][size];
    if (!$filesize1) $filesize1 = 0;
 
    $query1 = "select filename1 from member where member_id='$id'";
    $res    = mysqli_query($conn,$query1) or die("error1");
    $row    = mysqli_fetch_array($res);
    if ($row['filename1']) {
        $del = "../member_face/".$row['filename1'];
        if (file_exists($del)) {
            unlink($del) or die("upfile del error");
        }        
    }
 
    $str="";
    $query = "update member Set filename1='$filename1',filesize1='$filesize1',origin_filename1='".$_FILES[userfile1][name]."' where member_id='$id'";
    mysqli_query($conn,$query) or die("error2");
 
    $_SESSION['m_face'] = $filename1;
 
    $str = "ok";
    echo $str;
}
?>

 

 

$_FILES[userfile1] 형식으로 그 값들이 넘어온다.

$_FILES[userfile1][name] 파일명

$_FILES[userfile1][size] 파일 사이즈값