PHP Curl进度条（回调返回百分比）

Question

我已经使用curl实现了进度条

curl_setopt($curl, CURLOPT_PROGRESSFUNCTION, 'callback');

curl_setopt($curl, CURLOPT_BUFFERSIZE,64000);

curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);

并且需要一个回调函数。 问题是，脚本每次都会在我的html上输出百分比，像这样：

0
0.1
0.2
0.2
0.3
0.4
..
..
..
1
1.1

我该如何结合CSS来展示一个变化的进度条？

- YD8877

---

嗨@WarDoGG，你能否提供解决方案的完整工作示例？ - ayublin

Answer 1

假设您有一个进度条的HTML代码：

<div id="progress-bar">
    <div id="progress">0%</div>
</div>

CSS：

#progress-bar {
    width: 200px;
    padding: 2px;
    border: 2px solid #aaa;
    background: #fff;
}

#progress {
    background: #000;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
    text-indent: 5px;
    width: 0%;
}

还有JavaScript：

var progressElement = document.getElementById('progress')

function updateProgress(percentage) {
    progressElement.style.width = percentage + '%';
    progressElement.innerHTML = percentage + '%';
}

例如，您可以输出JavaScript并让它更新进度条：

<script>updateProgress(0);</script>
<script>updateProgress(0.1);</script>
<script>updateProgress(0.2);</script>
..
..

请注意，您不能将每个更新放在单独的脚本块中，因为浏览器会在执行之前尝试读取整个脚本，进度条将无法工作。

- Thai

---

太棒了！我无法感谢你的足够了。你真的给了我很大的方便。再次感谢，朋友。 - YD8877

只是出于好奇，这样做会不会让我的HTML太混乱了？因为有脚本标签？也许会过载浏览器并导致崩溃？ - YD8877

嗯，也许是因为每输出0.1%的进度就需要1000个脚本标签。或许你可以设置一个阈值，每更新1%的进度就输出一次，这样最多只需要100个脚本标签。 - Thai

或者直接使用已经为您完成此操作的类：https://bitbucket.org/spidgorny/nadlib/src/8591997b496da2425ee7924166108037162bd73b/HTML/class.ProgressBar.php?at=default - Slawa