【发布时间】：2014-02-18 14:11:12
【问题描述】：
我想使用 PHP 上传视频文件并通过进度条显示上传进度。但这比我想象的要困难得多，我试图将我找到的部分放在一起，但不幸的是我没有找到一个包含所需 php、ajax 和 html 代码的工作代码，所以我试图把不同的部分放在一起。
我的代码功能几乎完全。唯一的问题是，文件上传的当前进程（我以百分比表示）仅在进程结束后才由我的 javascript 加载，而不是从头开始。
这是我的 PHP 代码：
function file_get_size($file) {
//open file
$fh = fopen($file, "r");
//declare some variables
$size = "0";
$char = "";
//set file pointer to 0; I'm a little bit paranoid, you can remove this
fseek($fh, 0, SEEK_SET);
//set multiplicator to zero
$count = 0;
while (true) {
//jump 1 MB forward in file
fseek($fh, 1048576, SEEK_CUR);
//check if we actually left the file
if (($char = fgetc($fh)) !== false) {
//if not, go on
$count ++;
} else {
//else jump back where we were before leaving and exit loop
fseek($fh, -1048576, SEEK_CUR);
break;
}
}
//we could make $count jumps, so the file is at least $count * 1.000001 MB large
//1048577 because we jump 1 MB and fgetc goes 1 B forward too
$size = bcmul("1048577", $count);
//now count the last few bytes; they're always less than 1048576 so it's quite fast
$fine = 0;
while(false !== ($char = fgetc($fh))) {
$fine ++;
}
//and add them
$size = bcadd($size, $fine);
fclose($fh);
return $size;
}
$filesize = file_get_size('remote-file');
$remote = fopen('remote-file', 'r');
$local = fopen('local-file', 'w');
$read_bytes = 0;
while(!feof($remote)) {
$buffer = fread($remote, 2048);
fwrite($local, $buffer);
$read_bytes += 2048;
//Use $filesize as calculated earlier to get the progress percentage
$progress = min(100, 100 * $read_bytes / $filesize);
fwrite(fopen('files/upload/progress.txt', 'w'), $progress);
//you'll need some way to send $progress to the browser.
//maybe save it to a file and then let an Ajax call check it?
}
fclose($remote);
fclose($local);
这是我的 Javascript 代码：
function main()
{
var pathOfFileToRead = "files/upload/progress.txt";
var contentsOfFileAsString = FileHelper.readStringFromFileAtPath
(
pathOfFileToRead
);
document.body.innerHTML = contentsOfFileAsString;
}
function FileHelper()
{}
{
FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
{
var request = new XMLHttpRequest();
request.open("GET", pathOfFileToReadFrom, false);
request.send(null);
var returnValue = request.responseText;
return returnValue;
}
}
main();
function progressBarSim(al) {
var bar = document.getElementById('bar-fill');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
al++;
var sim = setTimeout("progressBarSim("+al+")",1000);
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
进度条目前确实在计时器上工作，因为 main() 函数不会从开头读取“progress.txt”的内容，而只会在结尾处读取。所以我想在将progressBarSim 与main() 结合起来获得一些帮助。
*编辑：* 我找到了一段代码：http://www.it-gecko.de/html5-file-upload-fortschrittanzeige-progressbar.html，现在正在使用它。
【问题讨论】：
-
你真的了解ajax是什么吗？看起来你没有，Ajax 用于调用 php 脚本并从中获取响应，而无需在浏览器中重新加载页面。所以你在这里使用的不是 Ajax，它不能工作，因为 php 将首先被完全执行。因此，当浏览器使用 main 函数时，文件说它已完成是合乎逻辑的。
-
你也在使用 ffmpeg？
-
我没有使用 ffmpeg，也没有太多的 javascript 和 ajax 经验，这就是我犯这个错误的原因。
标签： javascript php ajax