Jquery Ajax File Upload Done Function [duplicate]

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: stackoverflow.com/questions/17934689/… — thiagoxvo
– thiagoxvo, Commented Aug 18, 2015 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. php.net/manual/en/function.move-uploaded-file.php — user1189882
– user1189882, Commented Aug 18, 2015 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
– fareed, Commented Aug 18, 2015 at 23:56
Why do you need to use it in .done function? Can't it be in .success? — William Xavier
– William Xavier, Commented Aug 18, 2015 at 23:57
@WilliamXavier I have no preferences, can you show me how? sorry I'm new to this — fareed
– fareed, Commented Aug 18, 2015 at 23:58

William Xavier · Accepted Answer · 2015-08-19 00:08:35Z

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, 2015 at 0:08

answered Aug 19, 2015 at 0:01

William Xavier

4783 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

fareed Over a year ago

I tried this but this is not submitting!

William Xavier Over a year ago

Can you show how you're using the code and your PHP code?

William Xavier Over a year ago

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: <input type="file" id="image" name="image" multiple="false" accept="image/*" />

fareed Over a year ago

I have, check the edit please

William Xavier Over a year ago

You're trying to echo an invalid string, $_POST['tsitle'] you have to change to $_POST['note_title']

|

Collectives™ on Stack Overflow

Jquery Ajax File Upload Done Function [duplicate]

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related