Ben Adım 3 üzerinde formu Step4.php teslim olan bir çok adım formu var. Step4 bir sonuç sayfası ve yüklemek için biraz zaman alır, bu yüzden kullanıcı step3 Step4.php aslında yüklenmeden önce Gönder düğmesini tıkladığında bir ilerleme çubuğu veya bir yükleme çubuğu veya bir şey denemek ve uygulamak istedim. Ben jquery ile bu yapabileceğini düşünürdüm? Ama nasıl emin değilim. It step4.php verileri göndermek için jquery kullanmak zorunda kalmadan bunu yapmak mümkün mü?
Ben floş ile çıkış () kızarma, ilerleme çubuğu ile basit bir sayfa çıktısı ile MySQL yükleme programında bu çözüldü. Daha sonra çıkış javascript basit bir pasajı:
$('#progressbar').progressbar({value: 0});Ben de bu pasajını JS çıktısı sonra floş diyoruz. Bu parçacıkları için sürekli çıkışı ProgressBar güncelleştirmek istediğiniz her zaman var.
: Bu bir yükleme ilerleme çubuğu ise
İlk bölümü içine kanca PHP tarafında bir şey yüklüyor.
APC uzantısı yükleme kanca mekanizması içerir. PHP için ortak bir opcode önbellek (ve PHP6 varsayılan olarak dahil edilecektir) gibi zaten, bu yüklü olabilir.
APC yüklendikten sonra, PHP sayfası ve PHP işleyicisi tarafı hem de kurmak gerekir.
PHP sayfası:
<?php
$uploadId = uniqid('', true);
?>
<script type="text/javascript">
function uploadProgress() {
$.ajax({
url: 'url/to/handler.php',
data: ({ progressId: <?php echo $uploadId; ?> }),
success: displayProgress
});
}
function displayProgress(data) {
// Do something with data['current'] and data['total'] here
// Possibly using a JQuery UI Progressbar
// http://jqueryui.com/demos/progressbar/
}
</script>
...
<!-- Your other form elements would be on this form, too -->
<form action="step4.php" enctype="multipart/form-data">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uploadId; ?>" />
<input type="file" name="file" />
<input type="submit" onClick="setInterval(uploadProgress, 1000); return false;" />
</form>
Ayrıca AJAX aramak için PHP tarafında bir komut dosyası gerekir. PHP ile AJAX yaptık, ama bu böyle bir şey yapmalıyım beri süre oldu:
<?php
$returnData = array('current' => 0, 'total' => 0);
if (!empty($_GET['progressId'])) {
$uploadProgress = apc_fetch('upload_' . $_GET['progressId']);
if (!empty($uploadProgress)) {
$returnData['current'] = $uploadProgress['current'];
$returnData['total'] = $uploadProgress['total'];
}
}
echo json_encode($returnData);
Edit: Tüh, bu bir yükleme ilerleme çubuğu diyor orijinal yazılan hiçbir şey yok
Basit PHP Upload Progress Bar:
upload.php içinde
<?php
//get unique id
$up_id = uniqid();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload your file</title>
<!--Progress Bar and iframe Styling-->
<link href="style_progress.css" rel="stylesheet" type="text/css" />
<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<!--display bar only if file is chosen-->
<script>
$(document).ready(function() {
//show the progress bar only if a file field was clicked
var show_bar = 0;
$('input[type="file"]').click(function(){
show_bar = 1;
});
//show iframe on form submit
$("#form1").submit(function(){
if (show_bar === 1) {
$('#upload_frame').show();
function set () {
$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
}
setTimeout(set);
}
});
});
</script>
</head>
<body>
<h1>Upload your file </h1>
<div>
<?php if (isset($_GET['success'])) { ?>
<span class="notice">Your file has been uploaded.</span>
<?php } ?>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
Name<br />
<input name="name" type="text" id="name"/>
<br />
<br />
Your email address <br />
<input name="email" type="text" id="email" size="35" />
<br />
<br />
Choose a file to upload<br />
<!--APC hidden field-->
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->
<input name="file" type="file" id="file" size="30"/>
<!--Include the iframe-->
<br />
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
<br />
<!---->
<input name="Submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</body>
</html>
Upload_frams.php yılında
<?php
$url = basename($_SERVER['SCRIPT_FILENAME']);
//Get file upload progress information.
if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;
die;
}
//
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<link href="style_progress.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
setInterval(function()
{
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {
//get request to the current URL (upload_frame.php) which calls the code at the top of the page. It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
},
function(data) //return information back from jQuery's get request
{
$('#progress_container').fadeIn(100); //fade in progress bar
$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)
$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar
}
)},500); //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)
});
</script>
<body style="margin:0px">
<!--Progress bar divs-->
<div id="progress_container">
<div id="progress_bar">
<div id="progress_completed"></div>
</div>
</div>
<!---->
</body>
Style_progress.css yılında
/*iframe*/
#upload_frame {
border:0px;
height:40px;
width:400px;
display:none;
}
#progress_container {
width: 300px;
height: 30px;
border: 1px solid #CCCCCC;
background-color:#EBEBEB;
display: block;
margin:5px 0px -15px 0px;
}
#progress_bar {
position: relative;
height: 30px;
background-color: #F3631C;
width: 0%;
z-index:10;
}
#progress_completed {
font-size:16px;
z-index:40;
line-height:30px;
padding-left:4px;
color:#FFFFFF;
}
Thanks, Chintu