Reputation: 693
I am working on file uploader which upload the image when the input is changed my code for the form in html is
<form method="post" enctype="multipart/form-data">
<input name="uploaded[]" type="file" id="file_upload"/>
</form>
My JavaScript and Ajax :
document.getElementById("file_upload").onchange = function() {
var id = document.getElementById("user_id").innerHTML;
var file = document.getElementById("file_upload").files[0];
alert(file.size);
var formdata = new FormData();
formdata.append("filer",file,true);
var ajax = new XMLHttpRequest();
ajax.onreadystatechange =
function(){
if(ajax.readyState==4 && ajax.status==200){
document.getElementById("one").remove();
var img = document.createElement('img');
var first_path = '/user_image/';
var path = first_path.concat(id,'.png');
img.setAttribute('alt','User image');
img.setAttribute('id','one');
img.setAttribute('src',path);
document.getElementById("user").appendChild(img);
alert("end");
}
else{
document.getElementById("one").remove();
var img = document.createElement('img');
img.setAttribute('src','/img/loading.gif');
img.setAttribute('alt','User image');
img.setAttribute('id','one');
document.getElementById("user").appendChild(img);
}
}
ajax.open("POST","upload_image.php");
ajax.setRequestHeader("Content-Type", "multipart/form-data");
ajax.send(formdata);
};
And my php code is simple is just to test if everything is ok
require("../includes/config.php"); //config folder to start the session
if($_SERVER["REQUEST_METHOD"]=="POST"){
echo '<pre>',print_r($_FILES),'</pre>'; //dumping some variable and arrays to see where the problem is
}
The request that i get from server is Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 but i sent the formdata and the request header and i opened the file .
Upvotes: 14
Views: 30842
Reputation: 7157
Instead of sending the data as multipart/form-data
:
ajax.setRequestHeader("Content-Type", "multipart/form-data");
You should send it as application/json
:
ajax.setRequestHeader("Content-Type", "application/json");
Upvotes: -4
Reputation: 523
You have to just remove the following line:
ajax.setRequestHeader("Content-Type", "multipart/form-data");
Upvotes: 22