JQuery File Upload Check File size and File Type

Why File Size and File Type Checking is Important? Before diving into the technical details of implementing file size and file type checking, let’s first understand why it’s crucial for website owners and developers. Ensuring that uploaded files are within acceptable size limits and of the correct file type is vital for several reasons:

1. Security: Uploading large files or files of the wrong type can potentially create security vulnerabilities, allowing malicious files to infiltrate the server and compromise the website’s integrity.
2. Performance: Large files can impact website performance, leading to slow page load times and increased bandwidth usage, which can negatively affect user experience.
3. User Experience: Uploading files of the wrong type can result in broken links, missing images, or other issues that can negatively impact user experience on the website.

Now that we understand the importance of file size and file type checking, let’s delve into how we can implement this functionality using jQuery and PHP.

Step 1: HTML Form The first step in implementing file size and file type checking is to create an HTML form that allows users to select and upload files. We can use the input element with the type attribute set to “file” to create a file input field. Here’s an example of simple HTML form with file upload:

<form id="uploadForm" enctype="multipart/form-data"> <input type="file" id="fileInput" name="fileInput"> <input type="submit" value="Upload"> </form>

In the above example, we have an HTML form with an input element of type “file” and an id of “fileInput”. The form also has an id of “uploadForm” and the enctype attribute set to “multipart/form-data”, which is necessary for uploading files.

Step 2: jQuery File Size and File Type Checking Once we have our HTML form in place, we can use jQuery to implement file size and file type checking before submitting the form to the server. jQuery provides various methods and events that allow us to interact with file inputs and retrieve file-related information.

To Add Jquery to your web page, add the following code to your web page header section

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Here’s an example of how we can use jQuery to check the file size and file type before uploading the file:

$("#uploadForm").submit(function(event) { event.preventDefault(); var fileInput = $("#fileInput")[0]; var file = fileInput.files[0]; // Check file size if (file.size > 1048576) { // 1MB in bytes alert("File size exceeds the limit of 1MB."); return; } // Check file type if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) { alert("Invalid file type. Please upload an image (JPEG, PNG, or GIF) file."); return; } // File size and file type are valid, proceed with form submission $("#uploadForm")[0].submit(); });

In the above example, we have attached a submit event handler to the “uploadForm” form using jQuery. Inside the event handler, we retrieve the selected file.

Okay, So now how we are going to get this file on the server with PHP

Sure, here’s an example PHP code snippet that you can use to get the uploaded file on the server:

<?php // Check if the file was uploaded successfully if ($_FILES["file"]["error"] == UPLOAD_ERR_OK) { // Get the temporary name of the uploaded file $tmp_name = $_FILES["file"]["tmp_name"]; // Get the original name of the uploaded file $name = $_FILES["file"]["name"]; // Specify the directory where you want to store the uploaded file $upload_dir = "uploads/"; // Create the upload directory if it doesn't exist if (!is_dir($upload_dir)) { mkdir($upload_dir, 0777, true); } // Move the uploaded file to the upload directory if (move_uploaded_file($tmp_name, $upload_dir . $name)) { echo "File uploaded successfully."; } else { echo "Failed to upload file."; } } else { echo "Error uploading file: " . $_FILES["file"]["error"]; } ?>

In this code, we first check if the uploaded file has no errors (UPLOAD_ERR_OK). If there are no errors, we get the temporary name and original name of the uploaded file from the $_FILES superglobal array. Then, we specify the directory where we want to store the uploaded file ($upload_dir) and create the directory if it doesn’t exist. Finally, we move the uploaded file from the temporary location to the specified upload directory using the move_uploaded_file() function.

Please note that this is a basic example, you may need to add additional validation and security measures depending on your specific requirements and server configuration. Always sanitize and validate user input to prevent any security vulnerabilities.