1
我想使用PHP上傳視頻文件，並通過進度條顯示上傳進度。但是這樣比較困難，就像我認爲的那樣，我試圖把拼湊起來的拼圖放在一起，但不幸的是我沒有找到所需的php，ajax和html代碼一起工作的代碼片段，所以我試圖將不同的拼湊在一起。使用Javascript和PHP的視頻文件上傳進度條
我的代碼功能幾乎完全。唯一的問題是，目前的文件上傳過程中，我已經得到了百分之，是由我的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將首先完全執行。所以當瀏覽器使用主函數時，文件表示完成是合乎邏輯的。 – MisterJ
你也用ffmpeg？ – cocco
我沒有使用ffmpeg，也沒有太多有關javascript和ajax的經驗，這就是爲什麼我犯了這個錯誤。 – hardking