Siam2Advance Blog :

Web Programmer and Developer

Aug
12

source code PHP upload progress bar

Posted by Mr. Suriya

ตัวอย่างขอ Code PHP upload progress bar ครับก่อนจะใช้งาน Function ต่างๆได้นั้นจะต้องผ่านการติดตั้งโปรแกรมที่จำเป็นหรือพวก extension ต่างๆของ php มาก่อนนะครับถึงจะใช้งานได้



ตัวอย่าง :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
  $status = apc_fetch('upload_'.$_POST['APC_UPLOAD_PROGRESS']);
  $status['done']=1;
  echo json_encode($status);
  exit;
} else if(isset($_GET['progress_key'])) {
  $status = apc_fetch('upload_'.$_GET['progress_key']);
  echo json_encode($status);
  exit;
}
?>
<html>
<head>
<script type="text/javascript" src="/yui/yahoo.js"></script>
<script type="text/javascript" src="/yui/event.js"></script>
<script type="text/javascript" src="/yui/dom.js"></script>
<script type="text/javascript" src="/yui/animation.js"></script>
<script type="text/javascript" src="/yui/dragdrop.js"></script>
<script type="text/javascript" src="/yui/connection.js"></script>
<script type="text/javascript" src="/yui/container.js"></script>
<link rel="stylesheet" type="text/css" href="/yui/build/container/assets/container.css" />
<script type="text/javascript">
var fN = function callBack(o) {
  var resp = eval('(' + o.responseText + ')');
  var rate = parseInt(resp['rate']/1024);
  if(resp['cancel_upload']) {
    txt="Cancelled after "+resp['current']+" bytes!"; 
  } else {
    txt=resp['total']+" bytes uploaded!";
  }
  txt += "<br>Upload rate was "+rate+" kbps.";
  document.getElementById('pbar').style.width = '100%';
  document.getElementById('ppct').innerHTML = "100%";
  document.getElementById('ptxt').innerHTML = txt;
  setTimeout("progress_win.hide(); window.location.reload(true);",2000);
}
var callback = { upload:fN }
 
var fP = function callBack(o) {
  var resp = eval('(' + o.responseText + ')');
  if(!resp['done']) { 
    if(resp['total']) {
      var pct = parseInt(100*(resp['current']/resp['total']));
      document.getElementById('pbar').style.width = ''+pct+'%';
      document.getElementById('ppct').innerHTML = " "+pct+"%";
      document.getElementById('ptxt').innerHTML = resp['current']+" of "+resp['total']+" bytes";
    }
    setTimeout("update_progress()",500);
  } else if(resp['cancel_upload']) {
    txt="Cancelled after "+resp['current']+" bytes!"; 
    document.getElementById('ptxt').innerHTML = txt;
    setTimeout("progress_win.hide(); window.location.reload(true);",2000);
  }
}
var progress_callback = { success:fP }
 
function update_progress() {
  progress_key = document.getElementById('progress_key').value;
  YAHOO.util.Connect.asyncRequest('GET','progress.php?progress_key='+progress_key, progress_callback);
}
 
var progress_win;
 
function postForm(target,formName) {
  YAHOO.util.Connect.setForm(formName,true);
  YAHOO.util.Connect.asyncRequest('POST',target,callback);
/* Is there some event that triggers on an aborted file upload? */
/*   YAHOO.util.Event.addListener(window, "abort", function () { alert('abort') } ); */
  progress_win = new YAHOO.widget.Panel("progress_win", { width:"420px", fixedcenter:false, underlay:"shadow", close:false, draggable:true, modal:true, effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.3} } );
  progress_win.setHeader("Uploading "+document.getElementById('test_file').value+" ...");
  progress_win.setBody('<div style="height: 1em; width: 400px; border:1px solid #000;"> <div id="pbar" style="background: #99e; height: 98%; width:0%; float:left;">&nbsp;</div> <div id="ppct" style="height: 90%; position: absolute; margin: 1 0 0 185;">0%</div></div><div id="ptxt" style="margin: 3 0 0 5">0 of 0 bytes</div>');
  progress_win.render(document.body);
  update_progress();
}
</script>
</head>
<body>
 <form enctype="multipart/form-data" id="upload_form" action="" onsubmit="postForm('progress.php','upload_form'); return false;" method="POST">
  <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo uniqid()?>"/>
  <input type="file" id="test_file" name="test_file"/><br/>
  <input type="submit" value="Upload!"/>
 </form>
 <div id="progress_win"> 
    <div class="hd" style="color: #222; background: #bbb"></div> 
    <div class="bd"></div> 
    <div class="ft"></div> 
 </div> 
</body>
</html>



โดย ต้นร่มเกล้า

« Install PHP JSON
Pecl uninstall package »
You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

Add A Comment