Use jQuery AJAX to upload a file via FormData

Question

I want to upload a single file using just jQuery and then replace the upload form with the output from the PHP script that has processed the file upload.

Currently after I click submit, I receive a blank response from the PHP script. I think it's because the form data (file and upload inputs) is being overwritten by the upload data?

Any help solving this is much appreciated!

Here is my code:

HTML

<div id="container">
    <form id="form" enctype="multipart/form-data">
        <input name="file" type="file">
        <input type="hidden" name="upload">
    </form>
    <a href="javascript:void(0)" onclick="uploadData($('#form').serialize(), 'upload.php', '#container'); return false;">Upload &gt;</a>
</div>

JavaScript

function uploadData(data, url, container) {

    var formData = new FormData($(data)[0]);

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            $(container).html(response);
        },
        error: function() {
            alert('Error!');
        },
    });

    return false;
};

PHP

if (isset($_POST['upload'])) {

    // check the file has been uploaded
    if (isset($_FILES['file'])) {

        // check if there was an error uploading the file
        if ($_FILES['file']['error'] > 0) {

            // display error
            echo 'Error: ' . $_FILES['file']['error'];
        } else {

            // move and store file (overwrite if it already exists)
            $fileName = '/upload/' . $_FILES['file']['name'];
            move_uploaded_file($_FILES['file']['tmp_name'], $fileName);

            echo 'File uploaded successfully';
        }
    } else {

        die ('Error: No file selected for upload');
    }

}

in $_POST['importProducts'], where are sending importProducts from ajax call i don't see it. — chandresh_cool, Apr 20 '13 at 06:46
It doesn't fix the problem, it was a mistake I made when I was putting the text in Stackoverflow. Cheers. — cianz, Apr 20 '13 at 07:54
"Currently when I upload the file an error is thrown." What's the error? That would probably be the first thing to post. :) — Andrew Senner, Apr 20 '13 at 13:53
The javascipt error is now gone (I had an error in my code). I'm now receiving a blank response after posting the data. I think it's because the form data (file and upload) isn't being preserved? as it's being overwritten by the upload data? I need to send the form data and the upload data to the PHP script. Cheers. — cianz, Apr 20 '13 at 21:25

score 1 · Answer 1 · answered Apr 20 '13 at 21:41

1

I don't think ajax can handle file uploads. Have you checked that the file is actually uploaded?

If it is true, your response is empty because isset($_POST['upload']) returns false. Try adding a last else statement, to check what I'm saying:

if (isset($_POST['upload'])) {
    ...
} else {
    die ('Error: AJAX cannot handle file uploads');
}

answered Apr 20 '13 at 21:41

Marcelo Pascual

810
8
20

Thanks! You're right, it threw that error. The code I use to upload the file is based on code that is supposed to work which I found in the top rated post here: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – cianz Apr 20 '13 at 21:59
I didn't know the FormData feature, it's very interesting. For what I see, you call your function with `data`, which is the serialized string, but then you call `FormData` with `$(data)` as argument. In this case, `$(data)` means nothing (data it's not a selector). Try changing that line for `var formData = new FormData($('#form'));`. In addition, to check what is really reaching your PHP file, I would add `print_r($_POST);` and `print_r($_FILES);` at the beginning of the file. – Marcelo Pascual Apr 21 '13 at 05:17

Use jQuery AJAX to upload a file via FormData

1 Answers1