How to get the uploaded image using PHP via AJAX

Question

I need to get the uploaded image using PHP via Ajax

My form fields are,

<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
  <option value="xxx">xxx</option>
  <option value="yyy">yyy</option>
  <option value="zzz">zzz</option>
</select> 
<input type="button" id="bidm" name="bidm" value="Next"/>
</form>

In ajax call I have following code :-

   $.ajax({
        url: './api/addspot.php',
        data: $('#rent_details').serialize(),
        type: 'POST',   
         contentType: false,                
         success: function(data) {
            alert(data);
        },
        error: function(xhr, status, error) {
         alert(xhr.responseText);
        }
    });

Here I got only spottype value in Ajax success function .But I need to get all form fields value.

`serialize` don't work on file fields. Try to get file from `$('#fileToUpload').val()` — Raheel, Mar 03 '15 at 08:09
Have a look at this http://stackoverflow.com/questions/425095/submit-form-using-ajax-and-jquery — cb0, Mar 03 '15 at 08:25
Here also I used $('#rent_details').serialize() to get all form fields. — soniya soniya, Mar 03 '15 at 08:29

score 1 · Answer 1 · answered Mar 03 '15 at 08:33

This will work.

$('#rent_details').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
      url: './api/addspot.php',
      data: formData,
      type: 'POST',   
      contentType: false,
      processData: false,            
      success: function(data) {
        alert(data);
      },
      error: function(xhr, status, error) {
       alert(xhr.responseText);
      }
  });   

}));

formData = new FormData($('form')[0]); – soniya soniya Mar 03 '15 at 08:45 — soniya soniya, Mar 03 '15 at 08:45

score 1 · Accepted Answer · answered Mar 03 '15 at 08:36

<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
  <option value="xxx">xxx</option>
  <option value="yyy">yyy</option>
  <option value="zzz">zzz</option>
</select> 
<input type="submit" id="bidm" name="bidm" value="Next"/>
</form>

$(document).ready(function(){
    $("#rent_details").submit(function(e){
        e.preventDefault();
        $.ajax({
                method:'POST',
                url: "./api/addspot.php",
                data: new FormData( this ),
               processData: false,
                contentType: false
                }).done(function(data) {
                    console.log(data);
            });
    });
});

And get by name on your requested page. use $_FILES for upload files.

formData = new FormData($('form')[0]); – soniya soniya Mar 03 '15 at 08:46 — soniya soniya, Mar 03 '15 at 08:46

Codew · Answer 3 · 2015-03-03T09:01:37.860

You need to use the FormData();

Know that this code will not work on IE9 and lower.

This is for multiple file upload.

    $(document).on('click', '#bidm', function(e) {
        e.preventDefault();

        var request = new FormData(this);
        var my_files = $(this).closest('form').find('#fileToUpload').files;

        $.each(my_files, function(j,file) {
`              request.append('fileToUpload['+j+']', file);
        });

        $.ajax({
             url: './api/addspot.php',
             data: request,
             dataType: "json",
             contentType: false,
             processData: false,
             enctype: 'multipart/form-data',            
             success: function(data) {
                 alert(data);
             },
             error: function(xhr, status, error) {
                 alert(xhr.responseText);
             }
        });
    });

score 0 · Answer 4 · answered Mar 03 '15 at 08:50

Need to use the FormData() for the ajax data. It took all the form variables and passed it to the ajax. Then in the ajax function, you can retrieve the file name and the temp file name and save the image file to the folder where you required to save.

score -1 · Answer 5 · edited Nov 14 '17 at 09:57

-1

Try this to get file field value:

$('input[type=file]').val()

This code is worked

edited Nov 14 '17 at 09:57

Community

1
1

answered Mar 03 '15 at 08:15

Raheel

8,716
9
60
102

I got below error, ReferenceError: input is not defined – soniya soniya Mar 03 '15 at 08:17
try placing single quotes. Updated my answer – Raheel Mar 03 '15 at 08:22

How to get the uploaded image using PHP via AJAX

5 Answers5