Javascript 计算ajax上载进度的多个文件长度

我在phpbb posting_attach_body.html中有以下内容，它监视文件的上载进度。它可以很好地处理一个文件，但是如果我尝试上传多个文件，那么它将只计算第一个文件的大小，并使用该长度显示上传进度条。如何将其更改为计算并使用多个文件上载的总数

javascript函数*add_more_upload（）*加载额外的表单字段以添加文件，允许多次上载

<div class="panel bg3" id="attach-panel">
    <div class="inner"><span class="corners-top"><span></span></span>

    <p>{L_ADD_ATTACHMENT_EXPLAIN}</p>

    <fieldset class="fields2">
    <dl>
        <dt><label for="fileupload">{L_FILENAME}:</label></dt>
        <dd>
            <!-- IF TESTY -->
            <input type="url" name="remfile" id="remfile" class="inputbox autowidth" /> Remote File URL<br />
            <input type="text" name="altname" id="altname" class="inputbox autowidth" /> Alternative Name<br />
            <!-- ENDIF -->
            <input type="file" name="fileupload" id="fileupload" maxlength="{FILESIZE}" value="" class="inputbox autowidth" />
            <input type="button" class="button2" name="files_" value="+" style="width: 40px" onclick="add_more_upload()" title="" />
        </dd>
    </dl>
    <dl>
        <dt><label for="filecomment">{L_FILE_COMMENT}:</label></dt>
        <dd><textarea name="filecomment" id="filecomment" rows="1" cols="40" class="inputbox autowidth">{FILE_COMMENT}</textarea></dd>
    </dl>
    <input type="hidden" name="proxid" id="proxid" value="1" />
    <div id="multiple"></div>
    <dl>
        <dd>
            <input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFile(); " />
        </dd>
    </dl>
    </fieldset>

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p>
<script>
function _(el){
    return document.getElementById(el);
}

function uploadFile(){
    var file = _("fileupload").files[0];
    var formdata = new FormData();
    formdata.append("fileupload", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    //ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", uploadFile, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.addEventListener("complete", completeHandler, false);
    ajax.open("POST","forum/file_upload_parser.php");
    ajax.send(formdata);
}

function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText; _("progressBar").value = 100;
    _("status").innerHTML = "Upload Complete. Processing File... please wait.";
}
</script>
    <span class="corners-bottom"><span></span></span></div>
</div>

{L_添加_附件_解释}

{L_FILENAME}：
远程文件URL

备选名称

{L_FILE_COMMENT}：
{FILE_COMMENT}

函数（el）{
返回文档.getElementById（el）；
}
函数uploadFile（）{
var file=U8;（“文件上载”）.files[0]；
var formdata=new formdata（）；
formdata.append（“文件上传”，文件）；
var ajax=new-XMLHttpRequest（）；
addEventListener（“progress”，progressHandler，false）；
//addEventListener（“加载”，completeHandler，false）；
addEventListener（“错误”，上传文件，错误）；
addEventListener（“abort”，abortHandler，false）；
addEventListener（“complete”，completeHandler，false）；
open（“POST”，“forum/file_upload_parser.php”）；
发送（formdata）；
}
函数progressHandler（事件）{
_（“loaded_n_total”）.innerHTML=“Uploaded”+event.loaded+”字节+event.total；
var percent=（event.loaded/event.total）*100；（“progressBar”）.value=Math.round（percent）；（“status”）.innerHTML=Math.round（percent）+%uploaded…请稍候；
}
函数errorHandler（事件）{
_（“状态”）.innerHTML=“上传失败”；
}
函数abortHandler（事件）{
_（“状态”）.innerHTML=“上传中止”；
}
函数completeHandler（事件）{
_（“状态”）.innerHTML=event.target.responseText；（“progressBar”）.value=100；
_（“状态”）.innerHTML=“上载完成。正在处理文件…请稍候。”；
}

添加更多文件功能：

 function add_more_upload() {
            var id = document.getElementById('proxid').value ;
            var div = document.getElementById('multiple');
            var childdiv = document.createElement("div");
            childdiv.setAttribute('id','multiple'+ id); 
            var html = "<dl><dt><label for='fileupload'>{L_FILENAME}:</label></dt><dd><input type='file' name='fileupload" + id + "' id='fileupload" + id + "' maxlength='{FILESIZE}' value='' class='inputbox autowidth' /><input type='button' class='button2' name='files_" + id + "' value='-' style='width: 40px' onclick='remove_more_upload(" + id + ")' title='' /></dd></dl><dl><dt><label for='filecomment'>{L_FILE_COMMENT}:</label></dt><dd><textarea name='filecomment" + id + "' id='filecomment" + id + "' rows='1' cols='40' class='inputbox autowidth'>{FILE_COMMENT}</textarea></dd></dl>";               
            childdiv.innerHTML = html;
            div.appendChild(childdiv) ;
            document.getElementById('proxid').value++; 
            }

函数添加更多上传（）{
var id=document.getElementById（'proxid'）。值；
var div=document.getElementById（'multiple'）；
var childdiv=document.createElement（“div”）；
setAttribute（'id'，'multiple'+id）；
var html=“{L_FILENAME}:{L_FILE_COMMENT}:{FILE_COMMENT}”；
childdiv.innerHTML=html；
儿童组（儿童组）；
document.getElementById（'proxid'）。value++；
}

看起来您一次只上载一个文件：（“文件上载”）.files[0

此代码允许您一次上载多个文件：

<script>

    var totalSize = 0;
    var formdata = new FormData();

    function processFiles(ctrl) {
            // if the control has files
            if(ctrl.files)
            {
            for(var i=0; i < ctrl.files.length; i++) {
             var file = ctrl.files[i];
             totalSize += file.size;
             formdata.append("fileupload" + i, file);
            }
        }
    }

    // pass the name of the div holding the file upload controls
    function uploadFiles(ctrId) {

            totalSize = 0;
            formdata = new FormData();

            // builds a set of INPUT controls and tries to process any files
            var uploadControls = document.getElementById(ctrId).getElementsByTagName("INPUT");

            for(var i = 0; i< uploadControls.length; i++)
            {
               processFiles(uploadControls[i]);
            }

        var ajax = new XMLHttpRequest();

        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.open("POST","forum/file_upload_parser.php");
        ajax.send(formdata);        
    }

    function progressHandler(event) {
        document.getElementById("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+totalSize;
        var percent = (event.loaded / totalSize) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
    }

</script>   


<div id="fileuploads">
    <input type="file" name="fileupload" id="fileupload0" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" />
    <input type="file" name="fileupload" id="fileupload1" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" />
    <input type="file" name="fileupload" id="fileupload3" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" />
</div>
<input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFiles('fileuploads'); " />
<div id="loaded_n_total">waiting...</div>

var totalSize=0；
var formdata=new formdata（）；
函数processFiles（ctrl）{
//如果控件有文件
如果（ctrl.files）
{
对于（var i=0；i

您需要将其纳入现有代码中，它只是为了证明概念，向您展示一种跟踪一组上载文件的累积进度的方法。crtlId指的是什么？如果您查看按钮的onClick事件-它是文件上载控件的第一个按钮。确定上载两个文件时，它只拾取一个并报告大小，而不是第二个。但这两个文件仍在上传。我希望这能为每个文件使用一个单独的上传输入区域，而不是在输入标签中使用多个。在输入标记中使用multiple并选择两个文件时，如果选择yes，则会报告两个文件的总和，但遗憾的是，add_more_files函数无法正确处理此问题。什么add_more_files函数？您的原始问题中没有包含一个，因为您没有包含add#u more_upload（）函数，所以我的答案没有它。