Bài viết hướng dẫn cách tạo thanh tiến trình đẹp mắt bằng Jquery và PHP
Để có thể chạy được các script dưới đây thì yêu cầu bạn phải cài PHP library hoặc phiên bản PHP 5.4 và kích hoạt extension này.
Windows APC Installation
Follow this link Click Here
In php.ini include apc.rfc1867 = on
Linuk APC Installation
Follow this Link Click Here
In php.ini include apc.rfc1867 = on
php.ini located in /etc/php.ini
I. Get_Progress.php
Đoạn mã PHP xử lý tiến trình từ phía server
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php session_start(); error_reporting(0); /* // For PHP 5.4 users $progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name $current = $_SESSION[$progress_key]["bytes_processed"]; $total = $_SESSION[$progress_key]["content_length"]; echo $current < $total ? ceil($current / $total * 100) : 100; */ // For PHP 5.2+ php_apc.dll or php_apc.so holder if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){ $status = apc_fetch('upload_'.$_GET['progress_key']); echo $status['current']/$status['total']*100; exit; } ?> |
II. Index.php
Đoạn mã upload file với PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php $uiq = uniqid(); $image_folder = "uploads/"; $uploaded = false; if(isset($_POST['upload_image'])){ if($_FILES['userImage']['error'] == 0 ){ $up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']); if($up){ $uploaded = true; } } } ?> <form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well"> <label>Upload File</label> <input type="file" name="userImage" id="userImage" /> <span class="badge badge-info" style="display:none;">0%</span> <input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" /> <div class="progress" style="display:none;"> <div class="bar" style="width:0%;"></div> </div> </form> |
III. Javascript file
Dùng các thuộc tính của Jquery để lấy tiến trình upload file từ server sau mỗi giây.
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 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="application/javascript"> $(document).ready(function(){ var randIDS = '<?php echo $uiq?>'; // Add Hidden Field var hidden = $("<input>"); hidden.attr({ name:"APC_UPLOAD_PROGRESS", id:"progress_key", type:"hidden", value:randIDS }); $("#uploadImage").prepend(hidden); $("#uploadImage").submit(function(e){ var p = $(this); p.attr('target','tmpForm'); // creating iframe if($("#tmpForm").length == 0){ var frame = $("<iframe>"); frame.attr({ name:'tmpForm', id:'tmpForm', action:'about:blank', border:0 }).css('display','none'); p.after(frame); } // Start file upload $.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data){ var uploaded = parseInt(data); if(uploaded == 100){ $(".progress, .badge").hide(); clearInterval(loadLoader); } else if(uploaded < 100) { $(".progress, .badge").show(); $(".badge").text(uploaded+"%"); var cWidth = $(".bar").css('width', uploaded+"%"); } if(uploaded < 100) var loader = setInterval(loadLoader,2000); }); var loadLoader = function(){ $.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data){ var uploaded = parseInt(data); if(uploaded == 100){ $(".progress, .badge").hide(); parent.location.href="index.php?success"; } else if(uploaded < 100) { $(".progress, .badge").show(); $(".badge").text(uploaded+"%"); var cWidth = $(".bar").css('width', uploaded+"%"); } }); } }); }); </script> |
Done! Vậy là xong, chúng ta đã tạo ra một thanh progress bar thật đẹp phải không nào! Chúc bạn có những website đẹp với thủ thuật này!
Nếu bạn không làm được theo hướng dẫn, hay download code dưới đây về ngâm cứu nhé!
[jbutton link=”https://www.box.com/s/c2baf1688341012feab9″ color=”orange” icon=”download” size=”large”]Download code[/jbutton][jbutton link=”http://demos.9lessons.info/progress/index.php” color=”orange” size=”large”]View demo[/jbutton]
You must log in to post a comment.