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?

wht not to use jQuery Form? http://malsup.com/jquery/form/ – alexbusu Feb 27 '13 at 08:40 — alexbusu, Feb 27 '13 at 08:40

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

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.

AmazingDreams · Accepted Answer · 2013-02-27T10:15:14.050

0

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.

edited Feb 27 '13 at 10:15

answered Feb 27 '13 at 08:45

AmazingDreams

3,136
2
22
32

The page I linked in the question did involve doing the same thing, but it was a lot more involved which is why it seemed ver much like a hack... So where does this go to my php file that builds the email? – Ortund Feb 27 '13 at 09:01
Am I correct in assuming that I just pass `upload_target` to the sendmail.php file? – Ortund Feb 27 '13 at 09:06
@Ortund Set the form action to your sendmail.php file, then it should be good to go. You can add any form you want, it behaves like a regular POST. I use this to upload an image, check if I support the filetype (if not I give JS alert ;) ) and otherwise insert it into the database. With all the fields. So I guess you can use it to send mail as well :) – AmazingDreams Feb 27 '13 at 10:02
Yeah this looks a lot like in your URL, except he creates some fancy 'upload starting' text and a progressbar etc. It can be as simple as this, make sure to let your users know in some way that a file is being uploaded in the background and they have to wait for it to finish etc. – AmazingDreams Feb 27 '13 at 10:11

Uploading file to php through ajax

2 Answers2

Linked