This article will teach us how to upload an image using AJAX without converting it to base64 in PHP. Uploading an image is a common task in web development, and AJAX is a popular technique used to upload files asynchronously without requiring the user to leave the current page.
We will use a combination of HTML, jQuery, and PHP to upload an image using AJAX without converting it to base64 in PHP. We have created an HTML form that contains an input file element to select the image file to be uploaded and use jQuery to handle the form submission event and send the image file to the server using AJAX. Then use PHP to process the uploaded image file and store it on the server.
If you want to make an Ajax call without waiting for a response please check out the article – jQuery Ajax Call Without Waiting For Response in PHP
Step 1
Let’s get started by creating an HTML form that allows the user to select an image file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>Upload Image using AJAX without Base64</title> </head> <body> <form enctype="multipart/form-data" method="post"> <input type="file" id="image_file" name="image_file"> <button type="submit" id="upload_btn">Upload</button> </form> <div id="response"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('form').submit(function(e) { e.preventDefault(); // Get the selected image file var image_file = $('#image_file')[0].files[0]; // Create a new form data object var form_data = new FormData(); // Append the image file to the form data object form_data.append('image_file', image_file); // Send the AJAX request $.ajax({ url: 'upload.php', type: 'post', data: form_data, contentType: false, processData: false, success: function(response) { $('#response').html(response); } }); }); }); </script> </body> </html> |
In the HTML code, we create a form with an input file element to select the image file to be uploaded and add a submit button and a div element to display the response message from the server.
Use jQuery to handle the form submission event and create a new FormData object to send the image file to the server using AJAX and then append the selected image file to the FormData object using the append() method.
When we send the AJAX request using the $.ajax() method. We set the URL of the server-side script to handle the file upload to “upload.php”. We also set the type of the request to “post” and the data property to the FormData object we created earlier and set the contentType and processData properties to false to prevent jQuery from automatically processing the data or setting the content type. Finally, we define a successful callback function that displays the response message from the server in the div element.
Step 2
Now that we have created the HTML code, let’s create the PHP code to process the uploaded image file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php if ($_FILES['image_file']['error'] === UPLOAD_ERR_OK) { // Get the file name and extension $file_name = basename($_FILES['image_file']['name']); $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); // Generate a unique file name $new_file_name = uniqid() . '.' . $file_ext; // Move the uploaded file to the target directory move_uploaded_file($_FILES['image_file']['tmp_name'], 'uploads/' . $new_file_name); echo "Image uploaded successfully."; } else { echo "Error uploading image."; } ?> |
In the PHP code, we check if the uploaded image file has any errors. If there are no errors, we generate a unique file name and move the uploaded file to the target directory. We then send a success message back to the client. If there is an error uploading the image, we send an error message back to the client.
Note that you must create a directory named “uploads” in the same directory as the PHP script to store the uploaded images.
In conclusion, we have learned how to upload an image using AJAX without base64 in PHP. By sending the image data as a FormData object, we can avoid encoding the image to base64 and reduce the size of the data being sent to the server. The PHP code that handles the image upload is straightforward and can be modified to meet the needs of your specific application. With this knowledge, you can easily incorporate image-uploading functionality into your web applications.
Thanks for your time, to know about me.
Hello I Am Vijay Poshiya. 🙂
Here’s My little description of your attention on Me and My blog. I am here to help you with PHP programming. I can give you a cake walkthrough platform where a complex program can make it easier for you. I will also provide you with the rare collections of task sets over the internet.
I hope you will find your solutions in better understanding shape within my blog.
You can read more about PHPAdvices at the “About” page.
Leave a Comment