文件上传进度条 [英] File upload progress bar

问题描述

任何人谁开发文件上传进度条有下列内容：

Anyone who has developed file upload progress bar with following:

阿贾克斯 使用Javascript HTML 基于C CGI

Ajax Javascript HTML C based CGI

我停留在一个点上。 我无法读取CGI脚本的每个更新进度条值。

I am stuck at one point. I am not able to read each updated progress bar value from CGI script.

/*****************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）;在进度条可以看到递增每一秒）;但不能在适当的时间。

So,Ajax is not able to read each incremented value of "j". Therefore the progress bar starts as soon as the CGI stops writing to the text file. However, Ajax is able to display values from 1 to 100 (If I put sleep(1); the progress bar could be seen incremented at each second) ; but not at appropriate time.

推荐答案

看一看的 AJAX进度条，看看如何能在JavaScript中实现。你只需要编写的C code自己（供应包含进度百分比XML中的一部分;当然，你也可以使用JSON发送此数据）

Have a look at AJAX progress bar to see how this can be implemented in JavaScript. You only have to write the C code yourself (the part that serves the XML containing the progress percentage; of course you could also use JSON to send this data).

更新：的是什么，当你增加间隔，例如发生10000？目前，每秒的XMLHTT prequest连接是通过调用 request.open 在 send_request 复位。

Update: What happens when you increase the interval to e.g. 10000? At the moment every second the XMLHTTPRequest connection is reset by calling request.open in send_request.

这篇关于文件上传进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！