
AJAX image upload in PHP is simple if you use the right technique. You can get this done in less than five minutes. When you build websites routinely, image upload is one of the feature that you come across frequently.
To upload image using AJAX, you need not write a complex code. Uploading image via PHP AJAX function is easy and simple to implement in a few lines of script. I will present you a simple example using PHP AJAX for image upload.
In this example, I have added code for doing PHP image upload with AJAX without form submit by not reloading the page. I will use jQuery AJAX to implement image upload. There is a form with file input field and a submit button.
AJAX action will point to a URL that has a PHP script. This PHP file will process the AJAX request in the backend and will send a response which is the result of the image upload.
On submitting the form with the selected image file, the AJAX script will be executed. In this PHP AJAX image upload example code, it sends the upload request to PHP with the uploaded image.
PHP code moves the uploaded image to the target folder and returns the image HTML to show the preview as an AJAX response.
After uploading an image via AJAX, we are showing preview for the uploaded image in the target div.
This upload image using AJAX example script has two files. First one is for UI and has the AJAX script to invoke the backend script without form submit. The second file is the backend PHP script, that does the actual image upload and writes to the disk and responds with the image output.
I have used AJAX call and without form submit. For PHP AJAX call, I have used jQuery to make the invocation. I have included the jQuery AJAX JavaScript code at the bottom of the file just before HTML body for better page loading performance.
jQuery script version used is 3.6 via CDN. You can use any version of jQuery from very old to the latest possible and it should work without any issues. jQuery AJAX image upload requires core jQuery features and nothing fancy is used here.
I have kept the CSS styles to as minimum as possible, in order to give you freedom in integration with your application. Your application styles can takeover the over styles.
For PHP AJAX image upload, enctype='multipart/form-data'
is not required as we are not submitting via form post. We are using PHP AJAX data transfer and multipart form data is not required for the image upload.
index.php
<html> <head> <title>PHP AJAX Image Upload</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script> <style> #targetLayer { font-family: arial; margin-bottom: 20px; } .btn-upload { padding: 5px 30px; border-radius: 4px; margin-top: 20px; color: #2f2f2f; font-weight: 500; background-color: #ffc72c; border: 1px solid; border-color: #ffd98e #ffbe3d #de9300; } </style> </head> <body> <form id="image-upload-form" action="upload.php" method="post"> <div id="targetLayer">Image Preview</div> <div> <input name="userImage" type="file" class="inputFile" /> </div> <div> <input type="submit" value="Upload" class="btn-upload" /> </div> </form> <script type="text/javascript"> $(document).ready(function (e) { $("#image-upload-form").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: "upload.php", type: "POST", data: new FormData(this), contentType: false, cache: false, processData: false, success: function(data) { $("#targetLayer").html(data); }, error: function(data) { console.log("error"); console.log(data); } }); })); }); </script> </body> </html>
upload.php
To upload image using AJAX, you need a backend script that does the processing. PHP AJAX invokes a backend script to upload the image without form submit. This file upload.php here in this example does the backend processing of uploading the image file. On AJAX invocation, this PHP script moves the file to the disk and returns the HTML img element that points to the uploaded image file.
After successful image upload, AJAX success function will print the uploaded image HTML. Then, this will be added to a target DIV to show the preview for the users. For PHP AJAX image upload, you can copy these two files and add it to your projects. It is a simple integration process.
<?php if (is_array($_FILES)) { if (is_uploaded_file($_FILES['userImage']['tmp_name'])) { $sourcePath = $_FILES['userImage']['tmp_name']; $targetPath = "images/" . $_FILES['userImage']['name']; if (move_uploaded_file($sourcePath, $targetPath)) { ?> <img class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" /> <?php } } } ?>
Thanks a lot Vincy!!!
yesterday i was searching for such type of coding for by website for images upload but i want something more in this coding i want to resize the image size before submit. Please help me….
Welcome Dinesh.
can you give me its corrosponding php file
Hi Deepak,
There are only two files and it is presented in the article.
Thank u. Your code really helpful for me.
i have one more doubt. want develop a php project for fingerprint recognition. This possible or not. I was searched more sites, but most members say not possible. So i Want clear answer for this question vincy…
Hi Mani,
Welcome. Fingerprint recognition requires a hardware interfaced library. To integrate that into an application, PHP may be used.
Nice work!
Only say, please, change blog font, it’s very difficult to read
Thank you Edu. The font is planned to be changed along with the coming overall site redesign. Will do it soon in the coming month.
thanks a lot for this code… really its working…
Welcome Kirti.
Thanks for sharing such nice article. It works like charm.
Welcome Nilesh.
Thanks for this useful code. There is a problem with end tag in the HTML code. Please fix it.
Thanks Pooya, I have fixed it. Thanks for your time.
Most people mentioned that you can’t do this via ajax but I tried this and works fine for me. Thank you for the simple and nice code.
Thanks Ben. This PHP image upload script uses AJAX mechanism only.
This code is very helpful but I need one more thing, I want to store image in MySql database and fetch them again according to need. but thank you for this code.
Hi Rajesh,
Thank you. Do you want to store the image in database or just store the image url. Here is an example https://phppot.com/php/mysql-blob-using-php/
oh)
Oh, wow! You are damn genius! Two days I’m trying to find some solution, i used jquery form library, visited many sites, but decided the only problem here! Thank you!
Welcome Mika.
wow thanks a lot Vincy. i find this method easy.. thanks
Welcome Faisal.
can you give this code in java?
Amit, sorry I do not code in Java :(
how about if we want to preview image before send request to server, i mean we want to check look and feel image in the browser before actually send or upload to the server.
addition to this could i do upload multiple images to server with this?
Hi Mexanots (Nice name :-)
What you have asked is available as part of another tutorial that is linked in this article.
nice to meet you vincy
Nice to e-meet you too Kunal :-)
Mam i need same type but small change as gives image upload path complete with directory location
Sivaramaiah, you just need to supply the path you need on upload.
Thank you, I want to update image using Ajax in Laravel. Please help
Sure, I will add a new article. Keep watching Ayush.
will you please share your mysql code with me. i am trying inserting operation in this thats work but image name is not getting into database.
Hi Danish,
Sure, I will try to add MySQL code to insert the uploaded image URL.
Hello, can you share your full php file for this
Hi Joseph,
Yes it is shared. The PHP AJAX image upload example requires only two files and it is presented in full in the article. Apart from this there are no files.
Very to the point and straight forward php and javascript. Easy to follow for beginners. Thanks for this tuto.
Welcome Rodriguez. Thank you for the nice words.
Wonderful, the best and simple code for AJAX image upload. Thank you.
Thank you James.
Life saver may you see beautiful days
Thank you Michaella.
how to upload an image using ajax without action field and without reloading the page in PHP
Hi Sachin,
This example PHP script given in this article demonstrates the same. It uploads image using AJAX without action field and without reloading the page. You should run the PHP script and check it out.
can you make a form with 4 images to upload into mysql with image validation of four images. i can surely pay for that
email the zip to my email.
Sure Aunbandh. I will write the code and inform you.
Thanks for sharing the image upload code. Cool!
Welcome Jose.