HTML
<form action="https:phptri.tomgdow.com" method="POST" id="form_one"
encytpe="multipart/form-data">
<fieldset class="info">
<legend>File Information</legend>
<div>
<label for="myfile">Choose file to upload</label><br>
<input type="file" id="myfile" name="myfile">
</div>
<div>
<input type="submit" class="submit">
</div>
</fieldset>
<fieldset class="output">
<legend>Response</legend>
<div id="message"></div>
<div>
<label for="out-filename" class="hidden" id="label-out-filename">
Uploaded file
</label>
<output for="filename" id="out-filename"></output>
</div>
<div>
<label for="out-filesize" class="hidden" id="label-out-filesize">
File size
</label>
<output for="filesize" id="out-filesize"></output>
</div>
<div>
<label for="out-mimetype" class="hidden" id="label-out-mimetype">
Mime Type
</label>
<output for="mimetype" id="out-mimetype"></output>
</div>
<div>
<label for="out-tempname" class="hidden" id="label-out-tempname">
File Temp Name
</label>
<output for="tempname" id="out-tempname"></output>
</div>
<div>
<label for="out-errors" class="hidden" id="label-out-errors">
Errors
</label>
<output for="errors" id="out-errors"></output>
</div>
</fieldset>
<fieldset>
<legend>Client Side</legend>
<label for="filename" class="hidden" id="label-filename">
<code>formData.get('filename')</code>
</label>
<output id="filename"></output><br>
<label for="filesize" class="hidden"
id="label-filesize"><code>formData.get('filesize')</code>
</label>
<output id="filesize"></output>
</fieldset>
<fieldset>
<legend>Server</legend>
<label for="server-response" class="hidden" id="label-server-response">
Full Server Response
</label><br>
<output id="server-response"></output>
</fieldset>
</form>
JavaScript
async function sendData() {
const formData = new FormData(form_one);
document.querySelector("#filesize").value = formData.get('myfile').size;
document.querySelector("#filename").value = formData.get('myfile').name;
try {
const response = await fetch("https://phptri.tomgdow.com", {
method: "POST",
body: formData
});
let result = await response.text();
let responseArray = result.split(',');
document.getElementById('out-filename').value = responseArray[0];
document.getElementById('out-filesize').value = responseArray[1];
document.getElementById('out-mimetype').value = responseArray[2];
document.getElementById('out-tempname').value = responseArray[3];
document.getElementById('out-errors').value = responseArray[4];
document.getElementById('server-response').value = result;
} catch (e) {
console.error(e);
}
}
document.getElementById('form_one').addEventListener('submit', function (event) {
event.preventDefault();
sendData();
let msg = "Greetings from the PHP File Server (phptri)";
document.getElementById('message').innerHTML = msg;
document.getElementById("label-out-filename").style.visibility = "visible";
document.getElementById("label-out-filesize").style.visibility = "visible";
document.getElementById("label-out-mimetype").style.visibility = "visible";
document.getElementById("label-out-tempname").style.visibility = "visible";
document.getElementById("label-out-errors").style.visibility = "visible";
document.getElementById("label-filename").style.visibility = "visible";
document.getElementById("label-filesize").style.visibility = "visible";
document.getElementById("label-server-response").style.visibility = "visible";
});
php
<?php
echo($_FILES["myfile"]["name"].","
.$_FILES["myfile"]["size"].","
.$_FILES["myfile"]["type"].","
.$_FILES["myfile"]["tmp_name"].","
.$_FILES["myfile"]["error"])
?⪧