An example Ajax file upload with pure JavaScript
The following HTML5 tags provide the required components to add a file selector and an upload button to any web page: <input id=”fileupload” type=”file” name=”fileupload” /> <button id=”upload-button” onclick=”uploadFile()”> Upload </button> …
The following HTML5 tags provide the required components to add a file selector and an upload button to any web page:
<input id="fileupload" type="file" name="fileupload" /> <button id="upload-button" onclick="uploadFile()"> Upload </button>
The button kicks off a method named uploadFile(), which contains the JavaScript file upload logic.
<script>
async function uploadFile() {
let formData = new FormData();
formData.append("file", fileupload.files[0]);
await fetch('/upload.php', {
method: "POST",
body: formData
});
alert('The file has been uploaded successfully.');
}
</script>
JavaScript file upload logic
The above script tag contains nothing but pure JavaScript. There’s no jQuery or Dojo thrown into the mix and the logic is straightforward:
- Create a FormData object to contain the information to be sent to the server;
- Add the chosen file to be uploaded to the FormData object;
- Asynchronously call server-side resource to handle the upload; and
- The server-side resource is invoked through the POST method
- The server-side resource is passed the FormData which contains the file
- In this example that server-side resource is named upload.php
- When notified that the JavaScript file upload was successful, send an Ajax based alert to the client.
All the HTML and JavaScript logic will be contained in a single file named uploader.html. The complete HTML looks as follows:
<!DOCTYPE html>
<html>
<head>
<title> Ajax JavaScript File Upload Example </title>
</head>
<body>
<!-- HTML5 Input Form Elements -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload </button>
<!-- Ajax JavaScript File Upload Logic -->
<script>
async function uploadFile() {
let formData = new FormData();
formData.append("file", fileupload.files[0]);
await fetch('/upload.php', {
method: "POST",
body: formData
});
alert('The file has been uploaded successfully.');
}
</script>
</body>
</html>
Apache file upload processing
When an asynchronous JavaScript file upload happens, a server-side component must exist to handle the incoming file and store it.it requires a file named upload.php that contains a small PHP script to save the incoming file to a folder named uploads:
<?php
/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];
/* Choose where to save the uploaded file */
$location = "upload/".$filename;
/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) {
echo 'Success';
} else {
echo 'Failure';
}
?>
The PHP script is also straightforward. It obtains the name of the file being uploaded, and then creates a spot in a folder named upload to save the file. PHP’s move_uploaded_file method is then used to save the uploaded file to this new location.
Run the JavaScript file upload example
The files used in this example, along with a folder named upload, must be added to the htdocs folder of AHS. When a client accesses the uploader.html file through a browser, the client will be able to upload a file to the server using Ajax and pure JavaScript.
