How to pass selected file to php script using jQuery?

Question

The following form is what I use:

<form id="form-attachment" action="" method="post" enctype="multipart/form-data">
    <input name="attachment" type="file" />
    <input type="submit" />
</form>

This is what I do with jQuery:

$('body').on('submit', '#form-attachment', function(e) {

    e.preventDefault();
    var data = $(this).serialize();

    console.log('fine', data);

    var url = 'imageupload.php';

    $.ajax({
        type : "POST",
        url : url,
        data : data,

        success : function(response) {
            console.log('success: ' + response);
        },
        complete : function(response) {
            console.log('complete: ', response);
        },
        error: function(response) { 
            console.log('error: ', response); 
        }
    });
});

And this is my imageupload.php file:

$response = array();
$response["c"] = isset($_FILES["attachment"]);

echo json_encode($response);

And this is result on console on submit():

success: {"c":false}

So, what is wrong? Why my file is not visible at all?

where you want to view the file? there is no script to upload file in server.In your php file you need to use move_uploaded_file() like php functions — Dipanwita Kundu, May 03 '16 at 07:17
Please check [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — hmd, May 03 '16 at 07:17
Yes, I know... I will move it later, but for now it is not there for some reason... — Bartłomiej Semańczyk, May 03 '16 at 07:18
Instead of using isset use `if($_FILES['attachment']['size'] > 0) { $response["c"]=TRUE; } else { $response["c"]=FALSE; }` and check — Saty, May 03 '16 at 07:23
@BartłomiejSemańczyk It's just not possible without reloading the page. The only way you can upload files through AJAX is by using an iframe, which is what the library linked by user `hmd` does. [Here's more info.](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Alternatex, May 03 '16 at 07:28

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You can use FormData object, as shown below..

$('body').on('submit', '#form-attachment', function(e) {
var data = new FormData(jQuery('#form-attachment')[0]);
 jQuery.ajax({
   type: "post",
   contentType: false,
   processData: false,
   url: jQuery(this).attr('action'),
   dataType: "json",
   data: data,
   success: function (r) {
    // Success Handeling
   }
  });
});

NOTE:- No need to append anything as other answer suggests. This method shall pass all the input fields just like they would in a normal http form POST method.

Anton Grigoryev · Answer 2 · 2016-05-03T07:48:42.977

Use FormData object.

Here's the example how to send file via jQuery ajax request:

$(document).on('change', 'input[type=file]', function() {
  formData = new FormData;
  formData.append('file', $(this)[0].files[0]);
  $.ajax {
    url: '/upload-url',
    data: formData,
    type: 'post',
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
    }
  }
});

In your case you should serialize form first, append serialized data to the formData object. Then get file (or files) from a file field and append it to the same formData object. And finally send the formData object via ajax.

How to pass selected file to php script using jQuery?

2 Answers2