1
単一ファイルをアップロードするためのページを作成しました。進行状況を追跡するためにプログレスバーを含めることにしました。それはクロムで完璧に動作しています（IEとエッジでは完全には完璧ではありませんが、やはり私はちょっとしたことがあります）。ただし、進行状況バーと関連するdocument.getElementById()は正しく動作していません。 FirefoxはjQueryの進行状況バーがFirefoxでのみ動作しない
アップロードが代わりに私のプログレスバーのアニメーションや、アップロードされたバイト数などの関連アップロードデータを表示するので
を失敗し表示するために飛び込みました。私のファイルが最終的にアップロードされ、成功ページにリダイレクトされたということは奇妙なことです。より奇妙なのは、Firefoxのデバッグツールを使用してコードを1行ずつ進めようとしたときに、プログレスバーとアップロードデータが正しく表示されていることです。
PS。これらはローカルホスト上でのみテストされました。 depricrated方法を避けるために
uploadfile.php
HTML部分
<form action="getfile.php" id="upload_form" method="post" enctype="multipart/form-data"><br>
Type (or select) Filename: <input type="file" id="file1" name="uploadfile"><br>
<input type="submit" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
スクリプト部分
function uploadFile() {
var file = document.getElementById("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "getfile.php");
ajax.send(formdata);
}
function progressHandler(event) {
document.getElementById("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded/event.total) * 100;
document.getElementById("progressBar").value = Math.round(percent);
document.getElementById("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
document.getElementById("status").innerHTML = event.target.responseText;
document.getElementById("progressBar").value = 0;
}
function errorHandler() {
document.getElementById("status").innerHTML = "Upload Failed";
}
function abortHandler() {
document.getElementById("status").innerHTML = "Upload Aborted";
}