
Hello Dev’s today now in this post i will show you How To File Upload with Progress Bar using Ajax and PHP 8 ? Are you need any example of File Upload with the Progress Bar by using jQuery Ajax and PHP 8. Here I will explained this simply about jQuery by using Ajax Image Upload with Animating Progress Bar in php 8. Here I will also like to share with you a Ajax File Upload with Progress Bar by using PHP 8 and JQuery. Here i will show this step by step with explain Upload Large File with the Progress Bar by using jQuery Ajax in PHP 8.
Now in this article i will give you a simple example of How to Upload Image also with Progress Bar by using Ajax and PHP 8?
So, let’s start and see the bellow solution:
index.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>File Upload with Progress Bar using jQuery Ajax and PHP 8</codingspoint.com; <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.form.min.js"></script> <style type="text/css"> .progress { display: none; position: relative; height: 25px; background-color: #ddd; border-radius: 15px; } .progress-bar { background-color: green; width: 0%; height: 30px; border-radius: 4px; } .percent { position: absolute; display: inline-block; color: #fff; font-weight: bold; top: 87%; left: 50%; margin-top: -9px; margin-left: -20px; } #outputImage { display: none; margin-top: 10px; } #outputImage img { max-width: 300px; } </style> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-12"> <div class="card w-75 m-auto"> <div class="card-header text-center bg-info text-white"> <h4>File Upload with Progress Bar using jQuery Ajax and PHP 8 - codingspoint.com</h4> </div> <div class="card-body"> <div class='progress' id="progressDivId"> <div class='progress-bar' id='progressBar'></div> <div class='percent' id='percent'>0%</div> </div> <div id='outputImage'></div> <div id='error'></div> <form action="uploadFile.php" id="uploadForm" name="frmupload"method="post" enctype="multipart/form-data"> <div class="form-group"> <label><strong>Select Image : </strong><span class="text-danger"> *</span></label> <input type="file" id="uploadImage" name="uploadImage" class="form-control"> </div> <div class="d-flex justify-content-center"> <input id="submitButton" type="submit" name='btnSubmit' value="Upload" class="btn btn-success"> </div> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#submitButton').click(function () { $('#uploadForm').ajaxForm({ target: '#outputImage', url: 'uploadFile.php', beforeSubmit: function () { $("#outputImage").hide(); if($("#uploadImage").val() == "") { $("#outputImage").show(); $("#outputImage").html("<div class='alert alert-danger'>Choose a file to upload.</div>"); return false; } $("#progressDivId").css("display", "block"); var percentValue = '0%'; $('#progressBar').width(percentValue); $('#percent').html(percentValue); }, uploadProgress: function (event, position, total, percentComplete) { var percentValue = percentComplete + '%'; $("#progressBar").animate({ width: '' + percentValue + '' }, { duration: 5000, easing: "linear", step: function (x) { percentText = Math.round(x * 100 / percentComplete); $("#percent").text(percentText + "%"); if(percentText == "100") { $("#outputImage").show(); $("#error").html("<div class='alert alert-success mt-2'>Image Successfully Upload.</div>"); } } }); }, error: function (response, status, e) { alert('Oops something went.'); }, complete: function (xhr) { if (xhr.responseText && xhr.responseText != "error") { $("#outputImage").html(xhr.responseText); }else{ $("#outputImage").show(); $("#outputImage").html("<div class='alert alert-danger'>Problem in uploading file.</div>"); $("#progressBar").stop(); } } }); }); }); </script> </body> </html>
uploadFile.php
<?php if (isset($_POST['btnSubmit'])) { $uploadfile = $_FILES["uploadImage"]["tmp_name"]; $folderPath = "uploads/"; if (! is_writable($folderPath) || ! is_dir($folderPath)) { echo "error"; exit(); } if (move_uploaded_file($_FILES["uploadImage"]["tmp_name"], $folderPath . $_FILES["uploadImage"]["name"])) { echo '<img src="' . $folderPath . "" . $_FILES["uploadImage"]["name"] . '">'; exit(); } } ?>
Read Also: How To Implement Laravel 9 form validation ?
Thanks for read. I hope it help you. For more you can follow us on facebook