File upload using jquery form

File can be uploaded using this script with the help of jquery from. Copy the full script and create a new page.

<!doctype html>
<title>File Upload Progress Demo #1</title>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { 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%; }
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
<form action="file_upload.php" id="upload" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">

<div></div >
<div>0%</div >

<div id="status"></div>

<script src=""></script>
<script src=""></script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

beforeSend: function() {
var percentVal = '0%';
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
success: function() {
var percentVal = '100%';
complete: function(xhr) {


Write your file upload codes in the file_upload.php

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s