Data method settings for file upload using jquery ajax

Question

So this problem stems from a lack of a good understanding of how the data method functions when using ajax. I've looked at most of the other questions about ajax on here but this part isn't clicking for me.

As an example, I'm using ajax to send form data (which includes multiple text fields and one file upload) to php. The server script then inserts the field data and file url in a sql db, then returns all those values as a json encoded array.

My current ajax script is shown below and when it's run everything works except the file upload part. The file is not getting saved to the server and of course no url is coming back. If i change:

data: data,

to

data: text,

the file upload works, the file gets saved, but then when the json array is coming back to the page i get a white screen showing the array data (it doesn't return to the page the form data is coming from).

Why is this? what is the correct data method to use to allow both my file upload to work and for the data to come back to the page it was sent from.

$("document").ready(function() {
$(".data-form").submit(function() {
        var data = new FormData();
$.each(files, function(key, value)
  { data.append(key, value);
});
    if (confirm("\t\t\tAre you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing."))       {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "add-list.php",
            data: data,
            processData: false,
            contentType: false,
            success: function(response) {
                      if (response.success) {
                          $("#modal1").modal('hide');
                        $("#add_frame").show();
                        $("#newbutt").show();
                        $(".atitle").html('<a href="' + response.ad_linka + '" target="_blank">' + response.titlea + '</a>');
                        $(".acomment").html(response.commenta);
                        $(".aaddress").html(response.addressa);
                        $(".asale-price").html(response.sale_pricea);
                        $(".alease-price").html(response.lease_pricea);
                        $(".alot-size").html(response.lot_sizea);
                        $(".abuilding-size").html(response.build_sizea);
                        $(".azoning").html(response.zoninga);
                        }
                      else {
                          console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
                      }
                  },
                  error: function() {
                      alert("An Error has ocurred contacting the server. Please contact your system administrator");
                  }
              });
        return false;
    }
});
});

Take a ***GOOD*** look at this question http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — Musa, Jan 09 '15 at 23:40
@Musa that question is outdated. You can upload with ajax in modern browsers using FormData API — charlietfl, Jan 09 '15 at 23:44
serialize() does not capture files, only values of controls. There are numerous tutorials on how to upload with ajax , as well as some good plugins that help make it easier — charlietfl, Jan 09 '15 at 23:46

score 1 · Answer 1 · answered Jan 09 '15 at 23:30

1

You need to tell jquery to stop process your data

     processData: false, // Don't process the files
    contentType: false, // defaults to 'application/x-www-form-urlencoded; charset=UTF-8'

You didn't send how you construct the data but something like this should work

    var data = new FormData();
    $.each(files, function(key, value)
      { data.append(key, value);
    });

answered Jan 09 '15 at 23:30

silviud

1,015
1
12
21

So I was using serialize to define the data (yes I should have included that). So your changes (which I have put into the original question), are allowing the file to upload however the page is not coming back to the original one, it goes to white page showing the array. – rhill45 Jan 09 '15 at 23:40
how do you process your the POST in php ? – silviud Jan 09 '15 at 23:50
with pdo and bindparam. ex $stmt->bindParam(':title', $_POST['title']); All the data is coming back though (i can see it in my browser tool and on the screen), it's just not returning to the page it's sent from – rhill45 Jan 09 '15 at 23:54
if you asking how the data is formatted? exit(json_encode($response)); – rhill45 Jan 09 '15 at 23:56
for files you need to look into $_FILES and for the rest in $_POST - after all is done you should return the json structure - if you use some framework etc. normally you return a structure from controller/function if you just have a small script echo json_encode({"result" => "ok"}) or whatever you need – silviud Jan 10 '15 at 00:00

Data method settings for file upload using jquery ajax

1 Answers1