文件上传不在bootstrap模式下工作

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>