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 .
multipart/form-data contains boundary to separate name/value pairs. The boundary acts like a marker of each chunk of name/value pairs passed when a form gets submitted. The boundary is automatically added to a content-type of a request header.
Multipart form data: The ENCTYPE attribute of <form> tag specifies the method of encoding for the form data. It is one of the two ways of encoding the HTML form. It is specifically used when file uploading is required in HTML form. It sends the form data to server in multiple parts because of large size of file.
You have to just remove the following line:
ajax.setRequestHeader("Content-Type", "multipart/form-data");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With