<style> 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%; } </style>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" size="60" name="myfile"> <input type="submit" value="Ajax File Upload"> </form> <div id="progress"> <div id="bar"></div> <div id="percent">0%</div > </div> <div id="message"></div>

<script> $(document).ready(function() { var options = { beforeSend: function() { $("#progress").show(); //clear everything $("#bar").width('0%'); $("#message").html(""); $("#percent").html("0%"); }, uploadProgress: function(event, position, total, percentComplete) { $("#bar").width(percentComplete+'%'); $("#percent").html(percentComplete+'%'); }, success: function() { $("#bar").width('100%'); $("#percent").html('100%'); }, complete: function(response) { $("#message").html("<font color='green'>"+response.responseText+"</font>"); }, error: function() { $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); } }; $("#myForm").ajaxForm(options); }); </script>

<?php $output_dir = "../upload/"; if(isset($_FILES["myfile"])) { //Filter the file types , if you want. if ($_FILES["myfile"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br>"; } else { //move the uploaded file to uploads folder; move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]); echo "Uploaded File :".$_FILES["myfile"]["name"]; } } ?>