We all know that there is a common task in web development which is uploading files to a server. Even though the most common way to submit files is using forms, there are various methods as well. In this chapter we will cover three main approaches given below −
- Using FormData with fetch or $.ajax
- Using XMLHttpRequest
- Using a Plugin for Simplified Upload
Let us discuss above approaches in detail in the below section.
Using FormData with Fetch or $.ajax
The FormData object can be utilized to create a collection of key-value pairs that can be transmitted using network queries (like get or $.ajax). As it allows file uploading without the need for an HTML form, FormData is flexible and useful for many kinds of applications.
// Create a new FormData objectvar formData =newFormData();// Append the file to the FormData object
formData.append('pictureFile', pictureInput.files[0]);// Use $.ajax to send the file
$.ajax({// URL of the server to upload to
url:'upload.php',
type:'POST',// Necessary for file upload
processData:false,
contentType:false,// Expected response format
dataType:'json',// FormData containing the file
data: formData
});
Output
If the file has been uploaded successfully si the server will return a JSON object with details like −
{
"status": "success",
"message": "File uploaded successfully.",
"filePath": "uploads/picture.jpg"
}
If something goes wrong (such as if the file is too large or is not in the correct format), the server may send an error JSON object like this −
{
"status": "error",
"message": "File upload failed. Please try again."
}
Using XMLHTTPRequest
Another way to upload files without using forms is with XMLHTTPRequest. The file data can be sent directly using the POST request body. This more “manual” technique gives you more control.
// Get the form element var form = document.getElementById('the-form');
form.onsubmit=function(){var formData =newFormData(form);// Append file to the FormData
formData.append('file', file);var xhr =newXMLHttpRequest();// Set up request
xhr.open('POST', form.getAttribute('action'),true);// Send the formData with the file
xhr.send(formData);// Prevent actual form submissionreturnfalse;}
Output
If the upload is successfully processed, the server can reply with something like this −
{
"status": "success",
"message": "File uploaded successfully.",
"filePath": "/uploads/myfile.jpg"
}
The server will respond with the following if there is a problem (for example, an invalid file type or a very large file size) −
{
"status": "error",
"message": "File upload failed. Please try again."
}
Using a Simple Upload Plugin
The simpleUpload plugin uses a jQuery-based method that makes file uploading very easy. This plugin handles all the setup so you can focus on the upload behavior and server-side handling.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Upload</title><!-- Include jQuery --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!-- Use simpleUpload plugin --><script src="path/to/jquery.simpleUpload.js"></script></head><body><h2>Upload a File</h2><!-- File input field --><input type="file" name="file" id="simpleUpload" multiple><!-- Button to trigger upload --><button type="button" id="upload">Upload</button><script>}); </script></body></html>// JavaScript to handle the file upload $(document).ready(function() { $('#simpleUpload').simpleUpload({ // Server endpoint url: 'upload.php', trigger: '#upload', // Success handler success: function (data) { alert('Successfully Uploaded'); }, // Optional error handler error: function (error) { alert('Upload failed. Please try again.'); } });
Output
On success the page will display −
Successfully Uploaded
On failure the page will display −
Upload failed. Please try again.
Summary
Each of these methods offers a unique way to upload files without a form. FormData that uses $.ajax or fetch is easy to use and works with modern JavaScript. XMLHTTPRequest provides more control but requires more setup. With just jQuery and the plugin, the SimpleUpload Plugin is simple to use. As each method can be used in a number of contexts so you can select the one that best suits your requirements of the project.
Leave a Reply