how to add file data in ajax call without using FormData?

Question

How can i add a file data along with some normal data i.e without form in ajax call? current i have in my ajax script

$("body").on("click", "#next-step", function(event){
                $("#loader").show();
                event.preventDefault();               

                var file = $("#upload_logo")[0].files[0];
                $.ajax({
                    type: 'POST',
                    url: 'step-two.php',
                    data:{
                      name : "my name",  
                    },
                    file : {upload_logo : file},
                    contentType: false,
                    processData: false, 
                    success: function(response)
                    {
                        $("#loader").hide();
                        alert(response);

                    }
                })


    });

i found out the solution but it's not the way i would like it to work

event.preventDefault();
                var fdata = new FormData()


                if($("#upload_logo")[0].files.length>0)
                   fdata.append("upload_logo",$("#upload_logo")[0].files[0])

                $.ajax({
                    type: 'POST',
                    url: 'step-two.php',
                    data:{fdata},

And it works, but my question is what if i just want to add my file in data how can i do this? instead of using FormData() any alternative?

What is wrong with using `formData()`? It is the accepted method of file upload. Doing something else is using older technology. — Jay Blanchard, Aug 23 '16 at 13:03
you are right, i want to know isn't it possible just to add file fields just like we add normal input field in data? because i just cant find it anywhere, just like i did in my first code file : {upload_logo : file}, isn't is possible? — Taj Khan, Aug 23 '16 at 13:05
Yes, For the data inside the file to get transferred as part of POST request, we need to use FormData. You can also mix your data with the file content. data : { name : 'my name', fileContent : fdata} — Srikant Sahu, Aug 23 '16 at 13:08
so basically i cant add an image without FormData() i just want clarification? — Taj Khan, Aug 23 '16 at 13:10
Possible duplicate of [Uploading files using AJAX without FormData (IE9)](http://stackoverflow.com/questions/27006938/uploading-files-using-ajax-without-formdata-ie9) — abpatil, Aug 23 '16 at 13:10
@JayBlanchard: everything is wrong with using formData, because I don't want to include every field and I don't use `
` at all. — Alex G, Oct 10 '16 at 04:30
[Then you can use an older method.](http://www.peachpit.com/articles/article.aspx?p=1766159) — Jay Blanchard, Oct 10 '16 at 10:22

score 3 · Accepted Answer · answered Aug 23 '16 at 13:08

file upload is not possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further detail here

With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers.

FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

For more detail, see MDN link

score -6 · Answer 2 · answered Aug 23 '16 at 13:07

-6

Use Form data 

var formData = new FormData('form id');
  $.ajax({
 type: 'post',
 async: false,
 cache: false,
 url: '',
 contentType: false,
 processData: false,
 data: formData,
 dataType: 'json',
 success: function (response) {

   }
 });

answered Aug 23 '16 at 13:07

khaliq

98
9

i dont have any form , i just have input fields and my question is how i can do this without using FormData()? – Taj Khan Aug 23 '16 at 13:08
But you have a click handler why don't you make a request on that particular click? – khaliq Aug 23 '16 at 13:10
This has nothing to with html form in your web page. Its just another object in javascript to get the file content from input type="file". – Srikant Sahu Aug 23 '16 at 13:11
i am doing that and i can do it,, my simple question is how can i add an image uploaded via files to add in data in ajax call without FormData() – Taj Khan Aug 23 '16 at 13:11
Than the only option left is using iframe check out this [link](http://stackoverflow.com/questions/2909442/how-to-make-asynchronousajax-file-upload-using-iframe) – khaliq Aug 23 '16 at 13:20
Author asked you how NOT to use `formData()`; – Alex G Oct 10 '16 at 04:28

how to add file data in ajax call without using FormData?

2 Answers2