XML/HTML Code

     
         
         
         
     
   
     
         
      
   
      
       0%
      
   
     
   
     

 

CSS Code

<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> 

 

JavaScript Code 

<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 Code

<?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"];  

    }  

 

}  

?>