-1

I have a form, the form is including 2 text inputs and 1 file upload input. Text inputs are working with AJAX. But the file upload is not working with ajax. If i don't use ajax, its working. So my app is completely working, but without ajax, the page has to refresh because its directly going to the php file, but i dont want that. I want to use AJAX. How can i use ajax for this form?

   $("#form").submit(function(e) {
                
                e.preventDefault();
                
                
                $.ajax({
                    url: 'config.php',
                    type: 'POST',
                    data: $("#form").serialize(),
                    success: function () {
                $(".upClass").html("Updated");
                    
                    }
                })
            })
  <form id="form" method="POST"  enctype="multipart/form-data">
                                                    <div class="form-group">
                                                        
                                                            <input type="text" class="form-control" name="site_title">
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                            <textarea class="form-control" name="site_description" ></textarea>
                                                    </div>
                                                    
                                                     <div class="form-group">
                                                                  <input type="file" name="fileToUpload" id="fileToUpload">
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                            <button type="submit" class="btn btn-primary upClass">Update</button>
                                                    </div>  
</form>

I dont share my config.php because its already working.

Berkay O.
  • 65
  • 6
  • 1
    Does this answer your question? [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) – Nikita Zhuikov Apr 19 '21 at 13:32
  • In this link, some user says: "File upload is not possible through AJAX." But this post send in 2010. I think in recent years, it can be possible. – Berkay O. Apr 19 '21 at 13:37
  • @BerkayO. the "not" is crossed out. it wasn't possible at the time in all browsers, but now is. IE7 in particular didn't allow it and thus required iframe workarounds. – Kevin B Apr 19 '21 at 16:33

1 Answers1

0

jQuery's ajax function can send files too, but you must send a FormData:

$("#form").submit(function(e) {

e.preventDefault();

//This line replaces the jQuery's serialize function: 
var formData = new FormData($("#form").get(0));
//And then, you can add extra field/values like this, if you need to:
formData.append("dato", "valor");

$.ajax({
   url: 'config.php',
   type: 'POST',
   data: formData ,
   contentType: false,
   processData: false,
     success: function () {
       $(".upClass").html("Updated");
       }
   })
})

The contentType: false and processData: false ensure that the data is send as 'application/x-www-form-urlencoded', the same way as if it where a normal form submit.

Roimer
  • 1,419
  • 1
  • 19
  • 25