Question

我在phpbb的post_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>

add_more_files函数：

 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++; 
            }

Answer 1

看起来您一次只上传一个文件：_（“fileupload”）。文件[ 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>

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

1 个答案: