php message Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

Question

This is my javascript

function ajax_post(){
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            var url = "LiveUpdate.php";
            var sb = document.getElementById("LiveUpdate").value;
            var FirstName = document.getElementById("FirstName").value;
            var images = document.getElementById("images").value;

            var vars = "update="+sb+"&FirstName="+FirstName+"&images="+images;
            hr.open("POST", url, true);
            // Set content type header information for sending url encoded variables in the request
            hr.setRequestHeader("Content-type", "multipart/form-data");
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                    var return_data = hr.responseText;
                    document.getElementById("message").innerHTML = return_data;
                }
            }
            // Send the data to PHP now... and wait for response to update the status div
            var formData = new FormData(document.querySelector("form"));
            hr.send(formData); // Actually execute the request // Actually execute the request
            document.getElementById("message").innerHTML = "processing...";
        }
            //show image before uploading
                var loadFile = function(event) {
                var output = document.getElementById('output');
                output.src = URL.createObjectURL(event.target.files[0]);
                };//end image

and this is the form. javascript and the form is in the same file. the file name is sample.php

<form action="popup.php" method="post" id="myForm" name="myForm" enctype="multipart/form-data">
    <div id="message"></div>
    <img src="" id="output" />
    <input type="file" class="filestyle" data-buttonBefore="true" accept=".png, .jpg, .jpeg" onchange="loadFile(event)" name="images" id="images">
    <input class="form-control" type="text" placeholder="First Name" name="FirstName" id="FirstName" value="">
    <a href="#" class="btn btn-success" role="button" name="update" id="LiveUpdate"  onclick="javascript:ajax_post();">Update</a>
</form>

the idea in this code is. i want to insert the basic information like FirstName and Image into the database live without refreshing the page. the reason why i choose tag to submit the ajax. so the page url Account.php?Edit=1 will not change to Account.php because if it change to account.php the popup editing mode will be close. the problem in this code is. i don't know how to fix the error Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 can anyone help me how to fix this. thank you!

Possible duplicate of Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 — Vanquished Wombat
– Vanquished Wombat, Commented Nov 12, 2016 at 10:11

Community · Accepted Answer · 2017-05-23 11:46:14Z

55

The browser sets the correct headers (including the correct multipart boundary indication in the Content-type) if you haven't manually specified anything.

So all you need to do is remove the following line:

 hr.setRequestHeader("Content-type", "multipart/form-data");

Otherwise you will need to set the boundary yourself as it is suggested by Ellias Van Ootegem in Uploading a file with XMLHttprequest - Missing boundary in multipart/form-data:

hr.setRequestHeader("Content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Nov 12, 2016 at 10:19

Suat Hyusein

6154 silver badges14 bronze badges

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

3 Comments

Vanquished Wombat Over a year ago

As per comment here by Elias Van Ootegem: stackoverflow.com/questions/12348216/…

Thanasis Over a year ago

Man I have spent a whole day trying to send form data. That did the trick. Thanks so much !

CodiMech25 Over a year ago

Adding the boundary to the Content-Type header fixed my problem too.

barbachose · Accepted Answer · 2021-12-22 04:25:41Z

-1

Just remove the setRequestHeader()

answered Dec 22, 2021 at 4:25

barbachose

151 bronze badge

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

gre_gor Over a year ago

This just poorly repeats the top answer.

Steven · Accepted Answer · 2020-03-13 07:56:47Z

-2

This works as well. Taken from https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

const config = { headers: { Authorization: Bearer ${localStorage.token}, "Content-Type": "multipart/form-data; boundary=---------------------------974767299852498929531610575" } };

answered Mar 13, 2020 at 7:56

Steven

1,17517 silver badges16 bronze badges

3 Comments

gre_gor Over a year ago

It's unclear where config should be used.

gre_gor Over a year ago

Authorization header has nothing to do with OP's code.

gre_gor Over a year ago

The correct Content-Type header is already automatically set when sending FormData.

Collectives™ on Stack Overflow

php message Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related