ajax - 上传进度 div 增加

Question

 function uploadToServer(){
fileField = document.getElementById("uploadedFile");
var fileToUpload = fileField.files[0]; 
 var xhr = new XMLHttpRequest();
var uploadStatus = xhr.upload;
 uploadStatus.addEventListener("progress", function (ev) {
        if (ev.lengthComputable) {
            $("#uploadPercentage").html((ev.loaded / ev.total) * 100 + "%");
        }
    }, false);

uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false);
uploadStatus.addEventListener("load", function (ev) {$("#error").html("sorry!")}, false);

xhr.open(
        "POST",
        "serverUpload.php",
        true
        );
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", fileToUpload.fileName);
    xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize);
    xhr.setRequestHeader("X-File-Type", fileToUpload.type);
    //xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.send(fileToUpload);

}

$(函数(){

$("#uploadButton").click(uploadToServer);

});

`

<form action="" name="uploadForm" method="post" enctype="multipart/form-data">

嗨，这段代码工作正常。但我需要增加 div 的大小。但这个只显示百分比。我必须改变什么才能得到那个。

Answer 1

下面是使用 HTML5 的简单进度条代码

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
   var bar = document.getElementById('progressBar');
   var status = document.getElementById('status');
   status.innerHTML = al+"%";
   bar.value = al;
   al++;
   var sim = setTimeout("progressBarSim("+al+")",300);
   if(al == 100){
  status.innerHTML = "100%";
  bar.value = 100;
  clearTimeout(sim);
  var finalMessage = document.getElementById('finalMessage');
  finalMessage.innerHTML = "Process is complete";
}
   }
  var amountLoaded = 0;
  progressBarSim(amountLoaded);
 </script>

它可能会对您有所帮助，在您的编码中修复此代码。