Progress Bar MultiFile Upload di PHP 5.

Wah2, dah lama banget nih ga bikin tutorial, materi yg mau di tulis sih banyak, cuma waktunya aja yg ga memungkinkan, sampe-sampe materi yg udah disiapin, lupa deh nyimpennya dimana. Well2, kita mulai lagi tutorialnya dari bagaimana membuat Progress Bar MultiFile Upload di PHP.

Sebenernya udah banyak tutorial yg bicara soal Progress Bar di PHP, lengkapnya bisa masuk ke sini, tp itu untuk 1 file saja, nah disini ane coba membuat progress bar untuk multi file, dalam arti-an macam kirim email melalui yahoo or gmail gitu, bisa langsung attach file lebih dari 1, OK kita mulai y......

Berpedoman pada link di atas tuh, ane anggap ente dah bisa install APC dan berjalan dengan baik untuk upload 1 file, klo blum, coba pelajari link di atas dengan seksama, disitu udah super duper lengkap kok. Kemudian yg perlu disiapkan adalah file jquery.js dan jquery.MultiFile.js, berikut adalah script yg diperlukan :

Javascript-nya :

<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script>
function createRequestObject() 
{
    var requestObject;
    requestObject = false;
    if( window.ActiveXObject ){
        for( var i = 5; i; i-- ){
            try{
               if( i == 2 ){
                requestObject = new ActiveXObject( "Microsoft.XMLHTTP" );    
            }else{        
                requestObject = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
            }
            break;
          }catch( excNotLoadable ){                        
                requestObject = false;
          }
        }
    }else{
        requestObject = new XMLHttpRequest();
    }
    return requestObject;
}


var http = createRequestObject();


function postForm(formName){
  document.getElementById(formName).submit();
  setTimeout('updateProgress()', 100);
}

function updateProgress(){ 
  progress_key = document.getElementById('progress_key').value;
  http.open("GET", 'upload.php?progress_key='+progress_key, true);
    http.onreadystatechange = function () {
        if (http.readyState == 4) {
            if (http.status == 200) {
              the_object = eval("(" + http.responseText + ")");            
              if(!the_object.done){
               result = Math.round((the_object.current/the_object.total) * 100);
                var hasil = Math.round((result/100)*200);
                var xxx = "<div style='width:200px;border:1px solid #000;float:left;'><div style='background:#F00;width:"+hasil+"px;display:block;'>&nbsp;</div></div><div style='float:left;'>"+result+"%</div>";
                
                document.getElementById('progress_win').innerHTML = xxx;
                setTimeout("updateProgress()",500);
              }else{
                var xxx = "<div style='width:200px;border:1px solid #000;float:left;'><div style='background:#F00;width:200px;display:block;'>&nbsp;</div></div><div style='float:left;'>100%</div>";
                document.getElementById('progress_win').innerHTML = xxx;
              }
            }
        }
    }
  http.send(null);
}
</script>


Ini Css-nya :

<style>
.realupload  {
position:absolute;
top:1;
right:1;
left:0;
cursor: pointer;
/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */
z-index:2; /* bring the real upload interactivity up front */
}
</style>




Ini script HTML-nya :

<body>
<form action="upload.php" name="send" id="send-form" class="form-style" method="POST" onsubmit="postForm('send-form');" enctype="multipart/form-data">
<div>
<a id="pick-filez" style="cursor: pointer;">SELECT FILE</a><br/>
<!-- APC_UPLOAD_PROGRESS untuk memberikan nilai uniq kepada APC, untuk menghindari penggunaan secara bersamaan -->
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<? echo uniqid();?>"/>
<input type="file" name="multi_file[]" id="realupload" class="multi realupload"/>
</div>
<input type="submit" name="upload" id="send-button" value="UPLOAD"/>
<br>
<? echo "<font color='#FF0000'>$msg</font>";?>
<div id="progress_win"></div>
</form>
</body>




Dan ini PHP-nya :

<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
    $uploaddir = 'uploads_file/';
    $msg = "Tidak ada file yang di upload";
    foreach ($_FILES["multi_file"]["error"] as $key => $error)
    {
        if ($error == UPLOAD_ERR_OK)
        {
            $tmp_name = $_FILES["multi_file"]["tmp_name"][$key];
            $name = date("YmdHis").".".$_FILES["multi_file"]["name"][$key];
            $uploadfile = $uploaddir . basename($name);
            
            if(move_uploaded_file($tmp_name, $uploadfile))
            {
             $msg = "Upload MultiFile Berhasil";
            }
        }
    } 
}
else if(isset($_GET['progress_key'])) {
  $status = apc_fetch("upload_$_GET[progress_key]");
  echo json_encode($status);
  exit;
}
?>

Semua script2 diatas di jadiin satu file, dan bisa langsung dicoba........ untuk file lengkapnya bisa lihat yg ini. Simple bukan ?? ane jg kebetulan lagi pake fungsi ini buat bikin aplikasi mirip-mirip YouSendIt gt, ente tinggal modifikasi sesuai kebutuhan aj.




4 komentar:

  1. jquery nya berfungsi dimana????

    BalasHapus
  2. Jquerynya di dalem file jquery.multi.js, untuk mendeliver bagian ini "input type="file" name="multi_file[]" id="realupload" class="multi realupload"/.

    BalasHapus