Can't figure out how to POST form data to php with $.ajax

Question

EDIT: * updated code to reflect state and current issue *

My HTML form is properly accepting the input[type=file]. I know I'm appending the proper data (file.name) to formData. I know my script archive_upload.php is being called, but this is where things go wrong. $_POST doesn't seem to be taking in any thing. If I print $len after $len = (int) $_POST['CONTENT_LENGTH'];, it shows 0.

How can I properly retrieve the FormData being sent to my script?

Here's my JS:

var formData = new FormData();
var fileSelect = document.getElementById('file');
var uploadButton = document.getElementById('upload');
var form = document.getElementById('file_form');
/*$('#file').change(function() { });*/
form.onsubmit = function(event) {
    event.preventDefault();
    var files = fileSelect.files;

    for (var i=0; i<files.length; i++) {
        var file = files[i];
        if(!file.type.match('image.*')) {
            continue;
        }
        formData.append(i, file.name);
    }
    xhr = new XMLHttpRequest();
    xhr.open('POST', 'archive_upload.php');
    xhr.send(formData);
}

Here's my HTML:

<form id="file_form" action="archive_upload.php" method=POST  enctype=multipart/form-data accept-charset=utf-8>
    <input type="file" id="file" name="photos[]" />
    <button type="submit" id="upload">Upload</button>
</form>

And the PHP:

<?php
    $len = (int) $_POST['CONTENT_LENGTH'];
    $files = array();
    for ($i=0; $i < $len; $i++) {
        $f = $_POST[$i]['name'];
        $files.append($f);
    }
    $j = fopen('test.json', 'w');
    fwrite($j, json_encode($files));
    fclose($j);
?>

php append echo "success", change js to success: function(data) { alert(data); }, what u see — onegun, Feb 12 '15 at 02:10
@onegun I did as you said and no visible results...here's a [screenshot of the Inspector](http://imgur.com/9nBpWuS). It says I can't `append` on `formData`, but if I comment out that section and attempt again, I get the same error...I double checked all my source and there's no other instance of me even using `append`. — aweeeezy, Feb 12 '15 at 02:39

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

From what I understand it is not calling the ajax page at all, therefore consider adding the following code snippet as options in your ajax call:

processData: false,
contentType: false,

I believe this post has experience in a similar issue with file[s] and FormData

edited May 23 '17 at 11:56

Community

1
1

answered Feb 12 '15 at 02:50

Gregory Nikitas

493
2
7

This made my request successful. I see how `processData: false` helps, but not `contentType: false`. I'm not understanding how formData is formatted. If I `cat` the resulting `.json` created by the php script, I get an empty `[]`. I tried accessing elements by index: `alert('data'+file[0]);` but get "undefined". Btw, I changed the php script after getting a successful request to: – aweeeezy Feb 12 '15 at 03:50

score 1 · Answer 2 · answered Feb 12 '15 at 07:43

Since you are using Html form and ajax for submitting the form data, the simplest way would be something like this :

<script>
$(document).ready(function(){
    $("#upload").click(function(){
        $.ajax({url: "<your url>",
                data: {<put your data here>}
                success: function(result){

                }
                cache: false,
                contentType: false,
                processData: false
    });
    });
});
</script>

HTML form:

<form id="file_form" action="archive_upload.php" method=POST  enctype=multipart/form-data accept-charset=utf-8>
    <input type="file" id="file" name="photos[]" />
    <button type="button" id="upload">Upload</button>
</form>

The form is good and so is the ajax call, but the php isn't catching the data ajax throws at it. If you were to `alert(file.name)` inside the for loop of my JS, you'll see that the data is appending to `formData` properly. `xhr.open(...` is working as well because a `.json` file is created when the script runs, but the file is empty...so either `xhr.send(...` isn't working in the JS or `$_POST` isn't working in the php. — aweeeezy, Feb 12 '15 at 18:36

Can't figure out how to POST form data to php with $.ajax

2 Answers2