ajax jQ写的上传进度条

XML/HTML Code

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

 

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