File upload not Working in bootstrap model - php

Question

<a href="#" data-toggle="modal" data-target="#contact_dialog">
Change Picture
</a>
Here is my form
<form id="picture_change" class="form-horizontal" action="include/picture_change.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="text" name="vals">
<h5 style="padding-top:5px; padding-bottom:5px;">Change Picture</h5>
<input type="file" name="proimg" class="file">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sm" name="proimg" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sm" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
</form>
Close
<script>
/* must apply only after HTML has loaded */
$(document).ready(function () {
$("#picture_change").on("submit", function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
$('#contact_dialog .modal-header .modal-title').html("Result");
$('#contact_dialog .modal-body').html(data);
$("#submitForm").remove();
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
});
e.preventDefault();
});
$("#submitForm").on('click', function() {
$("#picture_change").submit();
});
});
</script>
picture_change.php
$imgFile = $_FILES['proimg']['name'];
$tmp_dir = $_FILES['proimg']['tmp_name'];
$imgSize = $_FILES['proimg']['size'];
if(!empty($imgFile))
{
$upload_dir = '../images/profile_picture/'; // upload directory
$images = $ob->imageupload($imgFile,$tmp_dir,$imgSize,$upload_dir);
if($images['ermsg'] == '')
{
$ob->upddata("update tbl_safety_pros_signup set image='".$images['userpic']."' where id='".$_SESSION['user_id']."'");
}
else {
echo $msgs=$images['ermsg'];
}
}
I try to upload a picture using bootstrap modal but file not uploaded
Other input field values are posted on action page, how to solve this problem.
Please help me.

Answer 1

<script>
$( '#picture_change' ).submit ( function ( event ) {
event.preventDefault ( );
event.stopPropagation ( );
var $scriptUrl = $( '#picture_change' ).attr ( 'action' );
var $postData = new FormData($('#picture_change')[0]);
$.ajax ( {
method : 'POST',
url : $scriptUrl,
data : $postData,
cache : false,
processData: false,
contentType: false,
dataType : 'json',
success : function ( data, textStatus, jqXHR ) {
if ( data.success === true ) { alert ('success'); }
else { alert ('failure'); }
},
error : function ( jqXHR, textStatus, errorThrown ) {
alert ( jqXHR.responseText );/*This returns the empty array*/
}
} );
} );
</script>