JS中的加载栏问题

时间:2019-05-23 08:53:57

标签: javascript file upload progress

我已经有了这段代码来运行进度条,以匹配JS中文件上传的进度,它工作正常,但是当我添加一行代码然后删除它时,因为我改变了主意突然停止工作了。

在添加之前提到的那行之前,我尝试过CTRL + Z,但仍然无法正常工作

以下是处理进度条的代码:

function uploadFile(){
    var file = document.getElementById("file").files[0];
    var formdata = new FormData();
    formdata.append("file", file);

    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);

    ajax.open("POST", "upload.php");
    ajax.send(formdata);
}

function progressHandler(event) {
    alert((event.loaded/event.total)*100)
    var percent = (event.loaded / event.total) * 100;
    document.getElementById("progressBar").value = Math.round(percent);
    document.getElementById("status").innerHTML = "Uploading status: " + Math.round(percent)+"%";
}

这是我的HTML进度栏:

<progress id="progressBar" value="0" max="100" style="width: 20%; margin-top: 10px;"></progress>
    <p id="status" style="font-size: 13px; margin: 5px; margin-top: 7px"></p>

有人可以帮助我吗?我不能全神贯注出什么问题

0 个答案:

没有答案