How to use $.ajax() for input field text AND FILE upload? [duplicate]

Question

This is my code

                        $.ajax({
                            type: 'post',
                            url: '../lib/upload.php',
                            data: new FormData( $("#niceidentifier") ),
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if(response == 'success') {
                                    return true;
                                }
                                else {
                                    alert(response);
                                    console.log(response);
                                }
                            }
                        });

The HTML form is just basic HTML (enctype included and method post) but unfortunately NO data is passed. How can I upload a file AND pass the input data once?

@Kami so I have to do "form_data.append" for every single input field? Even if it's not a file? — user3613095
– user3613095, Commented Nov 18, 2014 at 17:49

h0tfus3 · Accepted Answer · 2014-11-18 17:46:28Z

0

It's not as simple to pass files and other data, such as text, together in the same POST request. The only way to achieve that is making multipart/form-data request.

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2

answered Nov 18, 2014 at 17:46

h0tfus3

5729 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

QBM5 · Accepted Answer · 2014-11-18 17:51:48Z

0

I use ajaxForm to upload files asynchronously via ajax, it is much easier than trying to implement your own.

http://malsup.com/jquery/form/

answered Nov 18, 2014 at 17:51

QBM5

2,7882 gold badges19 silver badges26 bronze badges

Comments

Sebri Zouhaier · Accepted Answer · 2014-11-18 17:52:19Z

0

For a cross browser solution I think it is better to use

$("#form_id").ajaxSubmit();

answered Nov 18, 2014 at 17:52

Sebri Zouhaier

7457 silver badges18 bronze badges

Comments

kriyeta · Accepted Answer · 2014-11-18 18:11:49Z

0

You can use FormData to pass the File. and processData,contentType set to false compulsory. because you are not going to process file in client side.

// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
        data.append('myFile', value);   //No I18N
});


$.ajax({
    url: '/your-url', 
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});

OR you can send file with data as following:

$( '#formId' )
  .submit( function( e ) {
 e.preventDefault();
 $.ajax({
    url: '/your-url', 
    type: 'POST',
    data: new FormData( this ),
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});
});

edited Nov 18, 2014 at 18:11

answered Nov 18, 2014 at 17:51

kriyeta

7054 silver badges12 bronze badges

6 Comments

user3613095 Over a year ago

And how does the PHP script gets my input type text content?

kriyeta Over a year ago

@user3613095 I am not too much familiar with php but i think you can access it using $_FILES['myFile']['tmp_name']. you can read it w3schools.com/PHP/php_file_upload.asp

user3613095 Over a year ago

I get the FILE but I dont get the 20 TEXT, SELECT and RADIO FIELDS I also have in my form.

kriyeta Over a year ago

@user3613095 you need to append those values too. like data.append('name', some-value);

user3613095 Over a year ago

Cant that happen automatically? @kriyeta? My forms are more complex and it can variate between field types...

|

Collectives™ on Stack Overflow

How to use $.ajax() for input field text AND FILE upload? [duplicate]

4 Answers 4

Comments

Comments

Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

6 Comments

Linked

Related