0

ファイルのアップロードの進行状況を監視する phpbb posted_attach_body.html に次のものがあります。1 つのファイルでうまく機能しますが、複数のファイルをアップロードしようとすると、最初のファイルのサイズのみが計算され、その長さを使用してアップロードの進行状況バーが表示されます。代わりに、複数のファイルのアップロードの合計を計算して使用するように変更するにはどうすればよいですか?

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

1 に答える 1

1

一度に 1 つのファイルしかアップロードしていないようです: _("fileupload").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>
于 2013-10-25T19:36:22.303 に答える