Question

开发文件上传进度条的任何人都有以下内容：

的Ajax 使用Javascript HTML 基于C的CGI

我被困在某一点上。我无法从CGI脚本中读取每个更新的进度条值。

/*****************CLIENT SIDE CODE*************************/

var intervalID;
var percentage;
var request;
var tempvar=0;
var progress;


function polling_start() {   // This is called when user hits FILEULOAD button
        //alert ("polling_start");
        intervalID = window.setInterval(send_request,1000);
}

window.onload = function (){
        request  = initXMLHttpClient();
        progress = document.getElementById('progress');
}

function initXMLHttpClient() {
        //alert("send_request");
        if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
        }
        else{
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
return xmlhttp
}

function send_request()
{
request.onreadystatechange = request_handler;
request.open("GET","progress_bar.txt",true);
request.send(null);
}

function request_handler()
{
        if (request.readyState == 4 && request.status == 200)
        {
        document.getElementById("progress").innerHTML= request.responseText + '%';
        document.getElementById("progress").style.width = request.responseText + '%';
        document.getElementById("progress").style.backgroundColor = "green";
        }
}

/***********************SERVER SIDE CODE*****************************/

    cgiFormFileSize("UPDATEFILE", &size);   //UPDATEFILE = file being uploaded
    cgiFormFileName("UPDATEFILE", file_name, 1024);
    cgiFormFileContentType("UPDATEFILE", mime_type, 1024);
    buffer = malloc(sizeof(char) * size);

        if (cgiFormFileOpen("UPDATEFILE", &file) != cgiFormSuccess) {
        exit(1);
    }
    output = fopen("/tmp/cgi.tar.gz", "w+");

    printf("The size of file is: %d bytes", size);
    inc = size/(1024*100);

        while (cgiFormFileRead(file, b, sizeof(b), &got_count) == cgiFormSuccess)
        {
        fwrite(b,sizeof(char),got_count,output);
        i++;
                if(i == inc && j<=100)
                {
                fptr = fopen("progress_bar.txt", "w");
                fprintf(fptr, "%d" ,j);
                fseek(fptr, 0, SEEK_SET);
                i = 0;
                fflush(fptr);
                fclose(fptr);
                j++;   // j is the progress bar increment value
                }
        }

    fclose(output);
    cgiFormFileClose(file);
    retval = system("mkdir /tmp/update-tmp;\
                     cd /tmp/update-tmp;\
                     tar -xzf ../cgi.tar.gz;\
                     bash -c /tmp/update-tmp/update.sh");
}


/********************************************************************/

因此，Ajax无法读取每个递增的“j”值。因此，一旦CGI停止写入文本文件，进度条就会启动。但是，Ajax能够显示从1到100的值（如果我放入睡眠（1）;可以看到进度条每秒递增）;但不是在适当的时候。

Answer 1

查看AJAX progress bar，了解如何在JavaScript中实现此功能。您只需自己编写C代码（提供包含进度百分比的XML的部分;当然您也可以使用JSON发送此数据）。

更新：将间隔增加到例如10000？每隔一秒，通过调用request.open中的send_request重置XMLHTTPRequest连接。

Answer 2

我不相信可以在客户端实现只有html / javascript的进度条，你需要flash来执行此操作。

YUI Uploader可以帮助您解决此问题。

文件上传进度条

2 个答案: