Having issues uploading an image via ajax

Question

Sorry if the title isn't descriptive enough!

The idea is to have a div popup and allow users to type in their feedback and possibly submit a screenshot.

This is the javascript inside the page (which is called via ajax into a div).

Javascript

$("#submitFeedback").click(function(){
  //Check if the form is valid
  if($("#form").valid()){
    $("#form").hide(); //Hide the form
    $("#feedbackReport").append("<h2 style='color:white'>Submitting!</h2><hr />" +
      "<div style='text-align: center'><img src='images/loader.gif' /></div>");//Display loading spinner
    $.ajax({  
      type: "POST",  
      url: "ajax/submit_feedback.php",
      cache: false,
      data: $("#form").serialize(),//serialize form for submission
      success: function(data) {
        $("#feedbackReport").empty();//Clear form after submission
        $("#feedbackReport").append("<h2>Thank you!</h2><span id='close'>&#10006;</span><hr />"
          +"Your feedback has been submitted successfully!"
          +"<br /><br /><span id='cancel'>Close</span>");
        $("#cancel,#close").click(function(){
          $("#feedbackReport").parent().hide();
        });
      }
    });
    return false;//Prevent page from changing
  }
});

Now, if point my browser to the actual ajax page (ajax/feedback.php) and submit an image, it works fine! When I run it from index.php and call the feedback window via ajax, it wont submit my picture, only the text.

I know my submit_feedback.php page works fine because of this, I just have no idea why it won't post the image properly.

Any tips or help would be greatly appreciated!

Answer 1

Ajax can't do file uploads. You have to use something different such as https://github.com/valums/file-uploader

Answer 2

Ajax does not allow file uploads however the neat trick is to use an iframe that holds the file upload form and auto submit it when a file is selected.

This way only the iframe is redirected and it gives it an ajax feel.

Read more here