Ajax PHP file upload mistake - php

Question

I have this code in client side:
fileUpload: function monkey(){
var file = t.gI("photoFile"); //get element by photoFile
var formData = new FormData();
console.log(file.files.length);
formData.append("upload", file.files[0]);
var req = t.gR(); //XMLHTTPRequest
req.open('POST', 'php/fileupload.php', true);
req.setRequestHeader("Content-Type", "multipart/form-data", true);
req.send(formData);
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status == 200 && req.status < 300) {
t.gI("eventBox").innerHTML = req.responseText; //eventbox error handler
adminHandler.eventBox();
}
}
}
},
And this in server side:
<?php
header('Content-Type:multipart/form-data');
echo $_FILES['upload']['tmp_name'];
?>
And I got this error msg:
[15-Jun-2015 12:03:21 UTC] PHP Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0
[15-Jun-2015 12:03:21 UTC] PHP Notice: Undefined index: upload in /home/webprogb/public_html/php/fileupload.php on line 4
What can I do to fix it?

Answer 1

You can use this code for file uploading with ajax in pure javascript. Change this "#fileUploader" according to file field ID.
var AjaxFileUploader = function () {
this._file = null;
var self = this;
this.uploadFile = function (uploadUrl, file) {
var xhr = new XMLHttpRequest();
xhr.onprogress = function (e) {
//error
};
xhr.onload = function (e) {
//error
};
xhr.onerror = function (e) {
//error
};
xhr.open("post", uploadUrl, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.send(file);
};
};
AjaxFileUploader.IsAsyncFileUploadSupported = function () {
return typeof (new XMLHttpRequest().upload) !== 'undefined';
}
if (AjaxFileUploader.IsAsyncFileUploadSupported) {
ajaxFileUploader = new AjaxFileUploader();
$("form").submit(function () {
var uploader = $("#fileUploader")[0];
if (uploader.files.length == 0) {
return;
} else {
ajaxFileUploader.uploadFile(
"/YourUploadUrl",
uploader.files[0]);
}
return false;
});
}