Last Updated : Apr 15, 2022 Show
IN - jQuery PHP HTML CSS Progress Bar is used to display the progress of file upload process.Its very helpful and widely used in file upload process just to give user about progress of file upload. In this tutorial we will create file upload progress bar using jquery and php. You may also like Drag And Drop Image Upload Using jQuery Join With 27,000+ Members In Our Google Group & Get Latest Tutorials Get our latest tutorials, How-To guides on web development every day right into your inbox.  CHECK OUT THIS TUTORIAL LIVE DEMO → To Create File Upload Progress Bar it takes only four steps:-
Step 1. Make a HTML file and define markup for file uploadWe make a HTML file and save it with a name fileupload.html <html> <head> <link rel="stylesheet" type="text/css" href="progress_style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript" src="upload_progress.js"></script> </head> <body> <form action="upload_file.php"id="myForm" name="frmupload" method="post" enctype="multipart/form-data"> <input type="file" id="upload_file" name="upload_file" /> <input type="submit" name='submit_image' value="Submit Comment" onclick='upload_image();'/> </form> <div class='progress' id="progress_div"> <div class='bar' id='bar1'></div> <div class='percent' id='percent1'>0%</div> </div> <div id='output_image'> </body> </html> In this step we make a form to upload file and attach all the necessary files but before you proceed further you have to download jQuery and jQuery Form Plugin Step 2. Make a JavaScript file and define script for Progress BarWe make a JavaScript file and save it with name upload_progress.js function upload_image()
{
var bar = $('#bar');
var percent = $('#percent');
$('#myForm').ajaxForm({
beforeSubmit: function() {
document.getElementById("progress_div").style.display="block";
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
if(xhr.responseText)
{
document.getElementById("output_image").innerHTML=xhr.responseText;
}
}
});
}
In this step we use ajaxForm to upload and show the progress bar.jQuery Form Plugin has predefined functions to upload and display the progress bar. In first function we initialise the progress bar width and % and set the styling.In second function it increase the % and width of the bar as file uploads slowly slowly.In third function if file upload successfully then set the % to 100 and increase the bar width. In fourth function if the whole file upload process completes with no error then it displays the file.For more information about jQuery form functions. Step 3. Make a PHP file to upload the imageWe make a PHP file and save it with name upload_file.php if(isset($_POST['submit_image']))
{
$uploadfile=$_FILES["upload_file"]["tmp_name"];
$folder="images/";
move_uploaded_file($_FILES["upload_file"]["tmp_name"], $folder.$_FILES["upload_file"]["name"]);
echo '<img src="'.$folder."".$_FILES["upload_file"]["name"].'">';
exit();
}
In this step we get and upload file to folder and send the file to javascript upload file for display. n this step we except only images to upload you can customise further as per your need. You can also view How to Upload Images to server or database Step 4. Make a CSS file and define styling for progress barWe make a CSS file and save it with name progress_style.css. body
{
padding: 30px
}
form
{
display: block;
margin: 20px auto;
background: #eee;
border-radius: 10px;
padding: 15px
}
.progress
{
display:none;
position:relative;
width:400px;
border: 1px solid #ddd;
padding: 1px;
border-radius: 3px;
}
.bar
{
background-color: #B4F5B4;
width:0%;
height:20px;
border-radius: 3px;
}
.percent
{
position:absolute;
display:inline-block;
top:3px;
left:48%;
}
You can view our get file size and extension before uploading using jQuery tutorial to validate files before uploading. Thats all, this is how to Create File Upload Progress Bar Using jQuery and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial. CHECK OUT THIS TUTORIAL LIVE DEMO → Latest Tutorials
How show upload progress bar in PHP?Steps to run Upload ProgressBar Project:. Download complete project from Github.. Use Winrar to extract the zipped file.. Save the extracted file in XAMPP htdocs folder.. Run XAMPP server.. Now, open browser tab and type localhost/geeks/index. php or localhost/geeks on the address bar. It will display the output.. How do I add a progress bar?To create a basic Progress Bar using JavaScript, the following steps needs to be carried out:. Create HTML structure for your progress bar: The code below contains two “div” tag elements named “Progress_Status” and “myprogressbar”. ... . Adding CSS: ... . Adding JavaScript: ... . Link the HTML,CSS and JavaScript elements.. How do I create a progress bar in HTML?Use the <progress> tag to create a progress bar in HTML. The HTML <progress> tag specifies a completion progress of a task. It is displayed as a progress bar. The value of progress bar can be manipulated by JavaScript.
|
How to create progress bar in php
Pos Terkait
Copyright © 2024 idkuu.com Inc.
