Bunu jQuery Form plugin ile yapabilirsin hem zaman bakımından hemde % ve yazı bakımından.

Örnek vereyim,

jQuery Form Plugini kullanımı
//formid olarak kullandığımız formun id sini yazıyoruz 
$('#formid').ajaxForm(function() { 
         alert("Form gönderildi."); 
});
ajaxForm a parametre göndererek işlemimizin durumuna göre ne istersek yapabiliyoruz.
beforeSend fonksiyonu upload işlemi başlamadan önce yapmak istediğimiz işlemler için
uploadProgress fonksiyonu upload işlemimiz devam ederken çalışıyor
success form başarılı bir şekilde upload edildiyse çalışıyor.
complate fonksiyonu ise işlem bittiğinde tetikleniyor.

Upload Formu

<form id="dosyayukle" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="dosya">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="yuzde">0%</div >
</div>
<br/>

<div id="mesaj"></div>
beforeSend kısmında bar genişliğini %0 olarak ayarlayoruz ve yuzde divine %0 yazdırıyoruz.
uploadProgress te percentComplate ile işlemin yüzdesini alıyoruz ve bar id li div e genişlik olarak veriyoruz.
success olunca hepsini %100 yapıyoruz.
complate fonksiyonunda ise mesaj kısmına başarılı yazdırıyoruz.
eğer bir hata olduysa da error fonksiyonunda hata olarak belirtelim.

jQuery Ajax File Upload

$(document).ready(function()
{
 
     $("#dosyayukle").ajaxForm({
        beforeSend: function() 
        {
            $("#progress").show();
            //clear everything
            $("#bar").width('0%');
            $("#mesaj").html("");
            $("#yuzde").html("0%");
        },
        uploadProgress: function(event, position, total, percentComplete) 
        {
            $("#bar").width(percentComplete+'%');
            $("#yuzde").html(percentComplete+'%');
 
        },
        success: function() 
        {
            $("#bar").width('100%');
            $("#yuzde").html('100%');
 
        },
        complete: function(response) 
        {
            $("#mesaj").html("<font color='green'>Dosya başarılı bir şekilde yüklendi</font>");
        },
        error: function()
        {
            $("#mesaj").html("<font color='red'> Bir hata oluştu</font>");
 
        }
    });
 
});

html dosyamız aşağıdaki gibi

<!doctype html>
<head>
    <meta charset="utf-8"> 
    <title>PHP Upload jQuery Progress</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <style>
        form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
        #progress { display: none; position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        #bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
        #yuzde { position:absolute; display:inline-block; top:3px; left:48%; }
    </style>
 
</head>
<body>
 
<form id="dosyayukle" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="dosya">
     <input type="submit" value="Ajax File Upload">
 </form>
 
 <div id="progress">
        <div id="bar"></div>
        <div id="yuzde">0%</div >
</div>
<br/>
 
<div id="mesaj"></div>
         <script>
        $(document).ready(function()
        {
 
             $("#dosyayukle").ajaxForm({
                beforeSend: function() 
                {
                    $("#progress").show();
                    //herşeyi temizliyoruz.
                    $("#bar").width('0%');
                    $("#mesaj").html("");
                    $("#yuzde").html("0%");
                },
                uploadProgress: function(olay, yuklenen, toplam, yuzde) 
                {
                    $("#bar").width(yuzde+'%');
                    $("#yuzde").html(yuzde+'%');
 
                },
                success: function() 
                {
                    $("#bar").width('100%');
                    $("#yuzde").html('100%');
 
                },
                complete: function(response) 
                {
                    $("#mesaj").html("<font color='green'>Dosya başarılı bir şekilde yüklendi</font>");
                },
                error: function()
                {
                    $("#mesaj").html("<font color='red'> Bir hata oluştu</font>");
 
                }
            });
 
        });
 
    </script>
</body>
</html>

basit bir php upload dosyası oluşturalım. upload.php dosyamız da aşağıdaki gibi

<?php
 
$output_dir = "upload/";
 
if(isset($_FILES["dosya"]))
{
    if ($_FILES["dosya"]["error"] > 0)
    {
      echo "Hata: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        move_uploaded_file($_FILES["dosya"]["tmp_name"],$output_dir. $_FILES["dosya"]["name"]);
 
     echo "Yüklenen dosya :".$_FILES["dosya"]["name"];
    }
 
}
?>
Son olarak ;