Uploading file to php through ajax

Question

My form uses javascript alerts to communicate with the user as this is the preferred method in the company I work for (as opposed to constant redirects to and from the php handler file).

Because of this, I pass all my form data through some simple validation in jquery and send it on to the php handler via ajax. Here's a basic look at how I'm doing it...

var first_name = $(sender + ' #first_name');
var email = $(sender + ' #email');
var tel = $(sender + ' #telephone');
var comments = $(sender + ' #comments');

$.ajax({
    type: 'POST',
    url: 'sendmail.php',
    data: { first_name: first_name.val(),
        email: email.val(),
        telephone: tel.val(),
        comments: comments.val(),
        success: function clearFields() {
            first_name.val('');
            email.val('');
            tel.val('');
            comments.val('');
            alert('Thank you. We will contact you as soon as possible.');
        }
    }
});

Having added an file input field to one such form as follows, I'm having trouble with the upload. While the email sends correctly, I don't think the ajax is sending any usable data for the upload on to the php file

<input type="file" name="upload" id="upload" />

<script>

var upload = $("#upload");
$.ajax({
    type: 'POST',
    url: 'sendmail.php',
    data: { first_name: first_name.val(),
        email: email.val(),
        telephone: tel.val(),
        upload: upload.val(),
        comments: comments.val(),
        success: function clearFields() {
            first_name.val('');
            email.val('');
            tel.val('');
            upload.val('');
            comments.val('');
            alert('Thank you. We will contact you as soon as possible.');
        }
    }
});
</script>

I've found a number of options for this, but all the ones I've looked at such as this seem "hackish" to me.

Is there a simpler way to do this?

Answer 1

Ajax does not support file upload operation. But there are many plugins which make use of iframes to upload files asynchronously. You can read more about this technique here .

Few jQuery plugins which supports form uploads are
1. jQuery form
2. jQuery-File-Upload

There are a lot of question answers regarding this in many Q&A sites, like this one .

Another solution using html 5 is discussed here which uses FormData.

Answer 2

You have to do this through an IFrame

So you create a hidden iframe

<iframe id="upload_target" name="upload_target" style="display: none;" src="#"></iframe>
<!-- note the src="#" -->

Then you create a form with some button and all fields you wish to have

<form action="path/to/uploadscript.php" method="POST" enctype="multipart/form-data" target="upload_target">
<!--target will tell the browser to run it in the iFrame with name="upload_target" -->

then in uploadscript.php you can use all form values as if they are regular $_POST values:

<?php upload_file($_FILES['file'], $_POST['name'], $_POST['whatever']); ?>

This almost feels the same as using AJAX.