Jquery,Ajax post file upload

Question

I need to post the file upload to the current page by jquery, then upload the file , and then insert file upload, but the code not work... jquery can't post the file upload to the form:

 <form class="form-inline" role="form" id="form" enctype="multipart/form-data">
 <td colspan="3"><input type="file" name="pic_map" id="pic_map"></td>
 </form>

and this is javascript:

 $('#save').click(function (e) {
    $.post(
            "index.php?page=form1_sub1&pguid=<?php echo $pguid;?>",
            $("#form").serialize()
        )
        .done(function (data) {
            console.log(data);
            window.open('index.php?page=form1_sub2&pguid=<?php echo $pguid;?>', '_self');
        })
        .fail(function () {
            alert('<?php echo _CONNECTION_ERROR; ?>');
        });
});

and this is php code:

 $files = $_FILES['pic_map']['name'];
if(!$db->upload($_FILES['pic_map'], 'uploads/maps/'.$files)) {
    exit('file error');
}

Answer 1

Using XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers.

FormData support:

• IE 10+
• Firefox 4.0+
• Chrome 7+
• Safari 5+
• Opera 12+

FormData Example:

Markup:

<form class="form-inline" role="form" id="form" enctype="multipart/form-data"  onsubmit="return submitForm();">
 <td colspan="3"><input type="file" name="pic_map" id="pic_map"></td>
 <td colspan="3"><input type="submit" name="save" id="save"></td>
 </form>

Script:

function submitForm() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("pic_map"));
        $.ajax({
          url: "upload.php",
          type: "POST",
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }

Note: Can't send file using $("#form").serialize()