In this file you can find ready to deploy Php - Jquery Ajax upload form code.
With this code you can Upload files with jquery ajax to a php page. Php file will do the process and send back an ajax request. User do not need to change the current page.
With this code, user can select and click the upload file button or you can do an auto upload when the file input change.
During the uploading process, we will display an upload progress bar with the percentage of the current upload. After the upload finished, progress bar will be closed and if you need you can show an alert or get the uploaded file name from php file and display the file on the current page.
Progress Bar CSS Code
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
height: 20px;
border-radius: 3px;
background-color: #79f763;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}
Progress Bar Html Code
<div id="progress-wrp">
<div class="progress-bar"></div >
<div class="status">0%</div>
</div>
Jquery code Ajax Upload with Progress Bar