ファイルのアップロードの進行状況を監視する 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++;
}