AJAX JQuery Upload Image

jquery ajax로 이미지를 업로드하는 과정을 만들고 싶습니다. 여기 내 코드입니다 :AJAX JQuery Upload Image

<form action="" method="post" name="formPicture" enctype="multipart/form-data"> 
    <div class="modal-body panel-modal-scrol"> 
     <input type="file" name="picture" class="form-control" /> 
    </div> 
    <div id="info"></div> 
    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <input type="submit" value="Save" id="btn-saving" class="btn btn-primary" /> 
</form> 
<script> 
$("[name=formPicture]").submit(function(e){ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    console.log(formData); 

    $.ajax({ 
     type: 'POST', 
     url: 'upload_picture.php', 
     data: formData, 
     success: function(data){ 
     console.log(data);       
     } 
    }); 
}); 
</script>

upload_picture.php

<?php 
$path = $_FILES['picture']['tmp_name']; 
$file_name = $_FILES['picture']['name']; 
$newPath  = "upload/"; 
move_uploaded_file($lokasi_file,$newPath.$file_name); 
$insert="INSERT INTO `picture`(`picture`) 
         VALUES ('$file_name')"; 
$query=mysql_query($insert); 
if($query){ 
    echo '{"status":"success"}'; 
    exit; 
}else{ 
    echo '{"status":"error"}'; 
    exit; 
} 
?>

있지만 오류가 말했다 "주의 : 정의되지 않은 인덱스 : 4 호선에 그림"; 내 코드에 문제가 있습니까? 감사합니다 ..

출처

2014-12-21 Febry Damatraseta Fairuz