我安装了PECL模块。一切正常。进度条正在完成它的工作。它适用于Android浏览器上的所有桌面浏览器,但在Safari / iPhone(iOS 7.0.6 iPhone5和旧版iPhone4)上没有显示进度。这些文件确实上传了,但你只会看到(一段时间后)100%的短暂时间,而不是脚本显示“上传完成”。希望有人可以帮助我。
<?php
if ($_POST['progress'] == "show") {
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$path = $_SERVER['DOCUMENT_ROOT'].'/upload/files/' . basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'], $path);
}
exit; }
if ($_GET['getprogress'] == "1") {
if (isset($_GET['uid'])) {
// Fetch the upload progress data
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
// Calculate the current percentage
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
exit; }
// Generate random string for our upload identifier
$uid = md5(uniqid(mt_rand()));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
<title>Upload Something</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/start/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style>
#progress-bar, #upload-frame, #upload-result {
display: none;
}
</style>
<script>
(function ($) {
// We'll use this to cache the progress bar node
var pbar;
// This flag determines if the upload has started
var started = false;
$(function () {
// Start progress tracking when the form is submitted
$('#upload-form').submit(function() {
// Hide the form
$('#upload-form').hide();
// Cache the progress bar
pbar = $('#progress-bar');
// Show the progress bar
// Initialize the jQuery UI plugin
pbar.show().progressbar();
// We know the upload is complete when the frame loads
$('#upload-frame').load(function () {
// This is to prevent infinite loop
// in case the upload is too fast
started = true;
// Do whatever you want when upload is complete
$('#progress-bar').hide();
$("#progress-result").html('upload complete');
});
// Start updating progress after a 1 second delay
setTimeout(function () {
// We pass the upload identifier to our function
updateProgress($('#uid').val());
}, 1000);
});
});
function updateProgress(id) {
var time = new Date().getTime();
// Make a GET request to the server
// Pass our upload identifier as a parameter
// Also pass current time to prevent caching
$.get('/upload/index.php?getprogress=1', { uid: id, t: time }, function (data) {
// Get the output as an integer
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
// Determine if upload has started
started = progress < 100;
// If we aren't done or started, update again
updateProgress(id);
}
// Update the progress bar percentage
// But only if we have started
started && pbar.progressbar('value', progress);
});
}
}(jQuery));
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" id="upload-form" target="upload-frame">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="hidden" id="progress" name="progress" value="show">
<input type="file" name="file">
<br><input type="submit" name="submit" value="Upload!">
</form>
<div id="progress-bar"></div>
<div id="progress-result"></div>
<iframe id="upload-frame" name="upload-frame"></iframe>
</body>
</html>