I need to upload a file by only using vanilla.js, no frameworks are allowed.
Form:
<form id="fileUploadForm" action="fileUpload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
</form>
I placed the button outside of the form, because it is at another position in the HTML.
<button id="btnUpload">Upload</button>
This is the upload Script. I am using FormData
to get the form data, as described in this answer .
<script>
document.getElementById("btnUpload").addEventListener("click", function() {
fileUpload("fileUploadForm");
});
function fileUpload(pFormId)
{
debugger;
var form = document.getElementById(pFormId);
var formData = new FormData( form ); //returns no data!
var request = getHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
console.log("Response Received");
document.getElementById("debug").innerHTML = request.responseText;
}
};
request.open("POST", "fileUpload.php", true);
// request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.setRequestHeader("Content-type","multipart/form-data");
formData.append("action","test"); //Add additional POST param
request.send(formData);
}
function getHttpRequest()
{
let xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
I am using the PHP upload script from here .
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
I attached the debugger to my javascript and found out that formData
is empty and does not contain the file.
This is what I get from PHP:
Sorry, only JPG, JPEG, PNG & GIF files are allowed.Sorry, your file was not uploaded.
Even though the file does NOT already exists AND the file format is jpg.
Update:
This is what I get in the developers console network tab:
Request Payload:
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6
Content-Disposition: form-data; name="fileToUpload"; filename="Koala.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--
I appreciate any help!
Just drop the content-type
header, that will be set automatically by browser when using FormData
. That way content-type will also contain form boundary used to separate form data (the thing like ------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--
that separated the payload data).
I'd modify the code slightly.
document.getElementById("btnUpload").addEventListener("click", function() {
fileUpload("fileUploadForm");
});
You're binding the event on click
. I'd modify this and attach a submit
event to the form.
The closure will get the event target as callback:
document.getElementById("fileUploadForm").addEventListener("submit", function(e) { // <- pay attention to parameter
e.preventDefault(); // Prevent the default action so we stay on the same page.
fileUpload(e); // pass the event to your function
});
Now, on to your fileUpload
function.
function fileUpload(e)
{
debugger;
var formData = new FormData( e.target ); // pass the event target to FormData which serializes the data
var request = getHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
console.log("Response Received");
document.getElementById("debug").innerHTML = request.responseText;
}
};
request.open("POST", "fileUpload.php", true);
request.setRequestHeader("Content-type","multipart/form-data");
request.send(formData);
}
Disclaimer: I did not test this at all , so don't copy paste and expect it to work!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.