Jquery Ajax File Upload Done Function

Question

I have the following code to submit a form using jQuery Ajax:

HTML

<form id="note_form" action="upload_note.php" enctype="multipart/form-data">
  <input id="note_title" />
  <textarea id="note_text"></textarea>
  <input type="file" id="image" multiple="false" accept="image/*" />
</form>

Script

<script>
 $(document).ready(function () {
     $('#note_form').on("submit", function (e) {
            e.preventDefault();
            var $form = $(this),
                url = $form.attr('action');
            var posting = $.post(url, {
                title: $("#note_title").val(),
                text: $("#note_text").val()
            });
            posting.done(function (response) {
                alert(response);
            });
     });
});
</script>

PHP

$title = $_POST['title'];
$text = $_POST['text'];
//$image = $_POST['image'];
echo $title;

The code works fine but I have no idea on how to send the image to the server using this function.

EDIT

HTML

<form id="note_form" enctype="multipart/form-data">
   <input name="note_title" />
   <textarea name="note_text"></textarea>
   <input type="file" name="image" multiple="false" accept="image/*" />
</form>

SCRIPT

$(document).ready(function () {
        $('#note_form').on("submit", function (e) {
        e.preventDefault();
        var url = "upload_note.php";
        var formData = new FormData($(this)[0]);

        $.ajax({
             url: url,
             type: 'POST',
             dataType: "json",
             data: formData,
             contentType: false,
             processData: false,
             success: function (data) {
                 alert(data);
             }
         });
      });
});

PHP

$title = $_POST['note_title'];
echo $title;

Maybe this can help you: http://stackoverflow.com/questions/17934689/can-someone-explain-how-to-implement-the-jquery-file-upload-plugin — thiagoxvo, Aug 18 '15 at 23:50
It should be in the $_FILES array in PHP, you can use move_uploaded_file() to put it in the directory you want. http://php.net/manual/en/function.move-uploaded-file.php — , Aug 18 '15 at 23:50
@mark.hch I'm aware of how to receive the data on the server, my problem is in sending the data on the client side only. I just can't figure it out using done function — fareed, Aug 18 '15 at 23:56
Why do you need to use it in .done function? Can't it be in .success? — William Xavier, Aug 18 '15 at 23:57
@WilliamXavier I have no preferences, can you show me how? sorry I'm new to this — fareed, Aug 18 '15 at 23:58
Check my answer, so in your form, instead of using `id's`, you'll use the attribute `name` (E.g.: ``, and in your PHP file you use `$_POST["note_text"]` and `$_FILES` for the uploaded image. — William Xavier, Aug 19 '15 at 00:06

William Xavier · Accepted Answer · 2015-08-19T00:08:35.783

1

You can use something like that, so you only have to set in your inputs HTML elements the attribute name, and get them with $_POST in your PHP. This way, Ajax will send all the info from your form.

$('#note_form').on('submit',function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
      url: 'PATH_TO_YOUR_PHP',
      type: 'POST',
      dataType:"json",
      data:formData,
      contentType: false,
      processData: false,
      success: function(data) {

                // .success stuff here

        }
    });

});

So in your form, instead of using id's, you'll use the attribute name (E.g.: <input name="note_text" />, and in your PHP file you use $_POST["note_text"] and $_FILES for the uploaded image.

edited Aug 19 '15 at 00:08

answered Aug 19 '15 at 00:01

William Xavier

478
3
20

I tried this but this is not submitting! – fareed Aug 19 '15 at 00:14
Can you show how you're using the code and your PHP code? – William Xavier Aug 19 '15 at 00:14
Don't forget to apply name attribute to your file input type as well, If you don't use name attribute you're not sending the image: `` – William Xavier Aug 19 '15 at 00:19
I have, check the edit please – fareed Aug 19 '15 at 00:21
You're trying to echo an invalid string, `$_POST['tsitle']` you have to change to `$_POST['note_title']` – William Xavier Aug 19 '15 at 00:23
Sorry that was a typo. I'm using `$_POST['note_title']` – fareed Aug 19 '15 at 00:25
removing json has made the form to submit? Can you elaborate? – fareed Aug 19 '15 at 00:36
So that was the problem, at the end of your PHP file you was not encoding the PHP response as JSON, like: `echo json_encode($title)` – William Xavier Aug 19 '15 at 00:45
Thank you, should I use json then? or leave it like this? – fareed Aug 19 '15 at 00:47
It's not mandatory, JSON is better to work when you know how it works, that's up to you :) – William Xavier Aug 19 '15 at 00:48

Jquery Ajax File Upload Done Function

1 Answers1